携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

前端 token 过期

引言

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

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

前端 token 过期

上面出现的后端报错相关问题，都已经处理了，接下来处理前端方面的问题。

一般前端请求前 token 放置在 headers 中，是不会出现问题的，会出现问题的就是，token 过期情况。

若后端提示 token 过期，返回 401 的状态码，那么我们需要怎么做？

• 产生错误提示框，并且清除 localstorage 本地缓存中的 token 值，并且路由跳转到登录页

• 我们需要将当前页面的路由保存起来，确保再次登陆后，还能跳到这个页面位置处

清理 token

对于 token 过期，我们肯定是发起请求，后端进行判断后，返回的结果状态码为 401 时，前端才知道请求的 token 过期。

此时就应该，在 axios 中的 响应拦截器 中进行拦截处理

service.interceptors.response.use((response) => {

  const { code, data } = response.data
  let msg = ''

  if (200 < code && code >= 300) {
    msg = handleCode(code, data)

    return Promise.reject(new Error(msg))
  }

  return Promise.resolve(data)
}, err)

以及对返回的状态码进行判断，若为 401 时的处理

const handleCode = (code, data) => {
  const { message } = data
  switch (code) {
    case 401:
    
      router.replace({
        name: 'login'
      })

      ElMessage({
        type: 'error',
        message
      })

      clearStorage()

      break

    case 500:
      break
  }

  return message
}

这样的话，我们就完成了，页面的跳转，以及本地缓存中的 token 清理 和 消息提示。

保存当前页面的路由

这个的话，算是一些产品的相关需求。

就是我们当前所在的路由，是我们想要访问的，但是由于 token 过期，不得不重新登陆。

但是希望在下次登录成功后，能够直接跳转到那个位置处。

即我们需要在跳转到 login 页面时，添加 url 的 query

  router.replace({
    name: 'login',
    query: {
      redirect: router.currentRoute.value.fullPath
    }
  })

最终得到的效果如下

总结

通过 Express-Mysql-Vue3-TS-Pinia 做出一个 后台系统 项目，处理 前端 token 过期