为何jsonwebtoken判定我的Token无效？请求全流程问题排查

客户端代码 #

注册用户函数 #

public register = (user) => {
  this.httpClient.post<User>(this.url, user).pipe(
    tap(userData => {
      console.log('userData register.userData', userData)
      localStorage.setItem('userToken', JSON.stringify(userData.token));
      // this.router.navigate(['/home']);
    })
  ).subscribe(),
  catchError(error => {
    console.log('error', error)
    this.store.dispatch(messageActions.SetError({error}))
    throw error;
  })
}

存入localStorage的Token示例 #

"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiI2NTRkNzc4MzFkMGUxN2ZiZTI1MDMyM2EiLCJpYXQiOjE2OTk1NzU3ODQsImV4cCI6MTY5OTU3NzU4NH0.3HsdFjARnAjWn35_VlXsJQ6oFbfL_3OLHTPsroIOayU"

请求拦截器（添加Token到请求头） #

intercept(request: HttpRequest<unknown>, next: HttpHandler): 
Observable<HttpEvent<unknown>> {
   const token = localStorage.getItem('userToken');
   console.log('token', token)

   if(token) {
    const authReq = request.clone({setHeaders:{"Authorization":"Bearer " + token}});

    console.log('authReq', authReq)
    return next.handle(authReq)
}

    return next.handle(request);
  }
}

服务端代码 #

注册接口与Token生成逻辑 #

exports.register = async (req, res) => {
    try {
        let userData = {};
        userData.token = generateAccessToken(newUser._id);
        userData.cart = cart;

       console.log("userData", userData);

        return res.status(201).json(userData)

    } catch (error) {
        console.log(error);
        res.status(500).send('Problem signing up user!')
    }
};


function generateAccessToken(userId) {
    return jwt.sign({ userId }, process.env.JWT_SECRET, { expiresIn: '1800s' });
}

Token验证函数 #

function authenticateToken(req, res) {
    const authHeader = req.headers.authorization
    console.log('authHeader', authHeader)
    const token = authHeader && authHeader.split(' ')[1]
    console.log('token', token)

    try {
        if (token == null) return res.status(500).send('Problem authenticating user token.')

         const {
            userId
        } = jwt.verify(token, process.env.JWT_SECRET)

        return userId;
    
   } catch(err) {
       console.log(err);
        res.status(500).send('Problem authenticating user token.')
    }
}

服务端接收到的Token（去除Bearer前缀后） #

"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiI2NTRkNzc4MzFkMGUxN2ZiZTI1MDMyM2EiLCJpYXQiOjE2OTk1NzU3ODQsImV4cCI6MTY5OTU3NzU4NH0.3HsdFjARnAjWn35_VlXsJQ6oFbfL_3OLHTPsroIOayU"

问题现象 #

调用authenticateToken函数中的jwt.verify方法时，报错提示：Invalid token

解决方案 #

问题根源是客户端存储Token时多做了一层JSON.stringify，导致Token被额外的双引号包裹，服务端接收到的Token格式不符合JWT规范，因此验证失败。

具体修复 #

修改客户端注册函数中存储Token的代码，移除JSON.stringify：

localStorage.setItem('userToken', userData.token); // 直接存储原始Token字符串

额外检查项 #

• 确认服务端生成Token和验证Token时使用的process.env.JWT_SECRET是同一个值，密钥不一致会直接导致验证失败。
• 检查Token是否过期，示例中Token有效期为30分钟，若测试时超过有效期也会触发无效错误。

内容的提问来源于stack exchange，提问作者koque