承載令牌未定義（身份驗證）

Question

我在我的 mern 堆棧項目中使用 jwt 進行身份驗證。注冊工作正常，但每當我嘗試登錄時，我都會在控制台中收到此消息：

message: "Success"
token: "Bearer undefined"

這是我的 server.js 代碼，其中包含背面的身份驗證 API：

app.post("/register", async (req, res) => {
  const user = req.body;

  const takenEmail = await User.findOne({email: user.email})
  
  if(takenEmail) {
    res.json({message: "Email has already been taken"})
  } else {
    user.password = await bcrypt.hash(req.body.password, 10)

    const dbUser = new User({
      firstName: user.firstName.toLowerCase(),
      lastName: user.lastName.toLowerCase(),
      passportNumber: user.passportNumber.toLowerCase(),
      email: user.email.toLowerCase(),
      password: user.password
    })

    dbUser.save()
    res.json({message: "Success"})
  }
})
app.post("/login", (req, res) => {
    
  const userLoggingIn = req.body;

  
      User.findOne({email: userLoggingIn.email.toLowerCase()})
      .then(dbUser => {
          if (!dbUser) {
              return res.json({message: "Invalid Email or Password"})
          }
          bcrypt.compare(userLoggingIn.password, dbUser.password)
          .then(isCorrect => {
              if (isCorrect) {
                  const payload = {
                      id: dbUser._id,
                      email: dbUser.email,
                      firstName:dbUser.firstName,
                      lastName:dbUser.lastName,
                      passportNumber:dbUser.passportNumber
                  }
                  jwt.sign(
                      payload, 
                      process.env.JWT_SECRET,
                      {expiresIn: 86400},
                      (err, token) => {
                          return res.json({message: "Success", token: "Bearer " + token})
                      }
                  )
              } else {
                  return res.json({message: "Invalid Email or Password"})
              }
          })

      })
  
})

function verifyJWT(req, res, next) {
  const token = req.headers["x-access-token"]?.split(' ')[1]

  if(token) {
    jwt.verify(token, process.env.PASSPORTSECRET, (err, decoded) => {
      if(err) return res.json({
        isLoggedIn: false,
        message: "Failed To Authenticate"
      })
      req.user = {};
      req.user.id = decoded.id
      req.user.email = decoded.email
      next()
    })
  } else {
    res.json({message: "Incorrect Token Given", isLoggedIn: false})
  }
}

這是登錄組件（前端）的代碼：

const [email, setEmail] = useState("");
     const [password, setPassword] = useState("");


     async function loginUser(event) {
         event.preventDefault();

         const form = event.target;
         const user = {
             email: form[0].value,
             password: form[1].value
         }

         const response = await fetch('/login', {
            method: 'POST',
             headers: {
                 'Content-Type': 'application/json',
            },
             body: JSON.stringify(user),
         
         }) 

         const data = await response.json();
                  
         if(data.token) {
            localStorage.setItem("token", data.token)
            alert("Login successful!")
         } else {
             alert("Invalid email or password.")
         }
}

       useEffect(() => {
           fetch("/isUserAuth", {
               headers: {
                   "x-access-token": localStorage.getItem("token")
               }
           })
           .then(res => res.json())
           .then(data => data.isLoggedIn ? navigate("/"): null)
       }, [])

最后是注冊組件（前端）的代碼：

async function onSubmit(event) {
        event.preventDefault();

        const response = await fetch("/register", {
            method: "POST",
            headers: {
                "Content-type": "application/json"
            },
            body: JSON.stringify({
                firstName,
                lastName,
                passportNumber,
                email,
                password,
            })
        })

        const data = await response.json()

        if (data.message === "Success") {
            alert("Registeration successful!")
            navigate('/login')
        } else {
            alert("Email already taken.")
        }
        
    }

    useEffect(() => {
        fetch("/isUserAuth", {
            headers: {
                "x-access-token": localStorage.getItem("token")
            }
        })
        .then(res => res.json())
        .then(data => data.isLoggedIn ? navigate("/"): null)

        
    }, [])

包含密鑰的 .env 文件：

JWT_SECRET=secret123
PASSPORTSECRET=secret123

我認為錯誤來自 .env 文件中的密鑰。但是，我不認識這個問題。 任何人都可以給我一個提示嗎？

Answer 1

在您的server.js文件中，令牌應該由jwt.sign方法生成，如下所示：

const token = jwt.sign(
  payload,
  process.env.JWT_SECRET,
  {
    expiresIn: 86400,
  }
);
// save user token
user.token = token;

// user
res.status(200).json(user);