Vue3.x登录方案缓存以及细节汇总--持续更新

前言

几乎每个项目都会用到登录，那么这个是属于一个比较常见的功能，却可能被一次次的重复开发，影响了效率和浪费了不少时间，下面就来总结一下大致的思路，方便后续开发使用。

• 判断无token，就跳转页面，存放位置
  存放在router的前置守卫beforeEach中，示例代码

  const token = getCookie(TOKEN) || getQueryVariable('token')  //获取token的函数
  // console.log('token22', getQueryVariable('token') + '--', token)
  if (!token) {
    if (to.meta.ignoreAuth) {
      next()
      return
    }
     router.replace('/login')
}

• 后端接口校验token过期也应跳转到登录页

在axios的响应拦截器(axios.interceptors.response)中实现，判断否已过期(接口返回状态码判断),如下图

贴上代码片段

    if (code === 40106 || code === 40421) {
      window.location.replace('/#/login')
      return
    }

• 退出登陆清空所有缓存实现

   	// 清除所有缓存
     window.localStorage.clear()
    //清除cookie--手动封装
    removeCookie(TOKEN)