持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第30天，点击查看活动详情

后台项目 Express-Mysql-Vue3-Ts-Pinia token问题

引言

通过之前一段时间 Express 和 Mysql 的学习

这里尝试来搭建一个 后台系统 来巩固下学习的技术。

token问题

通过上面虽然已经我们处理了 token ，可以成功登录和发起请求，但是还有很多的细节，我们都还没有处理到位。例如

前端未将 token 绑定到 headers 的话，此时访问了后端的 非白名单 在内的路由时

会产生什么问题呢？
前端存放的 token ，通过请求后端，后端发现 token 过期了

又应该怎么处理呢？

这里我们去尝试模拟下这种情况

解决上述两个问题

前端未绑定 token 到 headers

也就是我们在请求的时候，把这段代码给注释掉。

然后进行登录，可以注意到虽然登录成功，也成功跳转到首页工作台，但是返回的结果是 500，也就是我们的服务端出现了问题

这就是我们需要处理的地方，其实这个 500 不是真正的报错原因，这个 500 是我们当时写的错误处理中间件处理的。

其实真正的错误，是我们没有携带 token，此时真正应该需要返回的状态码是 401。

前端token过期

这种情况的前提是，上面的问题已经解决，也就是前端请求时 headers 中绑定 token。

后面我会给出后端报错的解决办法。

先解决前端的 token 失效，需要我们修改后端 config/config.default.js 里面的默认配置，我们可以将过期时间设置为 10s

const config = {
  port: 8099,
  PRIVATE_KEY: 'wangzaimisu', // 自定义jwt加密的私钥
  JWT_EXPIRED: 10 // 过期时间 10s
  // JWT_EXPIRED: 60 * 60 * 24 // 过期时间24小时
}

module.exports = config

我们再次访问可以看到错误依然是 500

解决办法

解决上面两个报错问题，还是需要进一步修改我们的 错误处理中间 的代码，完整代码如下。

module.exports = () => {
  return (err, req, res, next) => {
    console.log('err', err)
    console.log('err', err.name)

    // 401
    if (err && err.name === 'UnauthorizedError') {
      const { status, code } = err
      let message

      if (code === 'invalid_token') {
        message = 'token失效，请重新登录'
      } else if (code === 'credentials_required') {
        message = '请携带token'
      }

      res.status(status).json({
        code: status,
        data: null,
        message
      })
    } else {
      res.status(500).json({
        error: err.message
      })
    }
  }
}

结果如下，就是正确的返回结果了

总结

通过 Express-Mysql-Vue3-TS-Pinia 做出一个后台系统项目，处理 token 所遇到的问题

后台项目 Express-Mysql-Vue3-TS-Pinia token问题