【Vue 3.x】系统token的设计与实现

前言

做前端的都应该知道，token的处理是几乎在每一个项目都会出现的场景。现在我简单归类出几种场景，并且逐一解答。

1. 登陆后token的储存
2. 退出登陆后token的清空
3. 无token或token失效处理
4. token的页面鉴权

1. 登陆后token的储存

常规的方案就是前端界面登陆后，后端会返回加密后的token，此时对于登陆后的token储存可归纳为2个步骤：

1. 储存token
2. 跳转到指定的首页

操作完上述两个步骤后，接下来，后端会要求后续所有接口都必须携带token，此时，如果你的项目使用的是axios的话，便需要设置请求头，发送token交由后端校验，以下是部分示例代码：

// 请求拦截器
axios.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    
    const token = getCookie(TOKEN) || ''
    config.headers['TOKEN'] = token

    return config
  },
  (error) => {
    return Promise.reject(error)
  },
)

至此便可完成登录后的流程。

2. 退出登陆清空token

执行清空token的操作

removeCookie(TOKEN)

3. 无token或者token失效处理

这个问题也是前端开发者们经常会碰到的问题，针对这类问题的处理我们放在路由前置事件中处理，即router.beforeEach，以下是示例代码：

router.beforeEach((to, from, next) => {
  const token = getCookie(TOKEN)
  //不存在token处理
  if (!token) {
    if (to.meta.ignoreAuth) {
      next()
      return
    }
    router.replace('/login')
  }
  // 此处可添加 token === ‘失效状态码’逻辑

  next()
})