Token鉴权流程 | Vue+Node+Express实现

Token鉴权流程是指通过令牌（Token）验证用户身份的过程。

一般来说，它包括以下几个步骤：

用户登录：用户在客户端中输入用户名和密码等凭证，请求访问某些资源。

// 服务器首先对客户端传来用户名和密码等凭证的校验，校验成功后再生成凭证，继续进行下面步骤，否则返回错误
...

生成Token：应用程序接收到用户的登录请求后，会验证凭证，并为该用户生成一个Token。

const jwt = require('jsonwebtoken')

...
// 生成token
const tokenStr = jwt.sign({ username }, 'jwtconfig.jwtSecretKey', { expiresIn: '10h', algorithm: 'HS256' });
...

返回Token：服务器将生成的Token返回给客户端。

//后端
res.send({ msg: '登录成功', code: 200, data: { info: userInfo, token: tokenStr } })

客户端存储Token：客户端收到Token后，通常会将其存储在本地，以便将来的请求可以携带该Token进行认证。

//前端...存储到全局状态管理以及本地
loginUser(username, password, code).then(res => {
  if (res.data) {
    setToken(res.data.token) // 保存到本地
    this.token = res.data.token  // 保存到vuex
    ...
  } else {
    ...
  }
}).catch(error => {
  ...
})

携带Token发送请求：客户端向服务器发送请求时，在请求头中添加Token信息。

// axios封装request，配置request拦截器
service.interceptors.request.use(config => {
  if (getToken()) {
    config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
  }
  ...
}

验证Token：服务器接收到请求后，从请求头中获取Token，并使用密钥解密Token，以确保它是有效的并且没有被篡改。

const { expressjwt: expressJWT } = require("express-jwt");
// 使用 .unless({ path: [/^\/api\//] }) 指定哪些接口不需要进行 Token 的身份认证
app.use(expressJWT({ secret: 'jwtconfig.jwtSecretKey', algorithms: ['HS256'], credentialsRequired: true }).unless({ path: [/^\/log\//] }))

返回响应：如果Token验证成功，则服务器返回所请求的资源；否则，服务器会发送错误响应并要求重新进行身份验证。

// Token 验证错误的中间件
app.use(function (err, req, res, next) {
    // 省略其它代码...
    // 捕获token身份认证失败的错误
    console.log('err', err)
    if (err.name === "UnauthorizedError") {
        res.status(401).send("invalid token...");
    } else {
        next(err);
    }
})