vue3+storage实现token验证

验证过程

1. 登录成功返回 token
2. 拿到token，将token存储到localStorage，并跳转路由页面
3. 跳转路由，就判断 localStroage 中有无 token
4. 调后端接口，都要在请求头中加token
5. 前端拿到状态码为401，就清除token信息并跳转到登录页面

storage

localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

/**
 * 封装操作localstorage本地存储的方法
 */
export const storage = {
  //存储
  set(key: string, value: any) {
    localStorage.setItem(key, JSON.stringify(value))
  },
  //取出数据
  get<T>(key: string) {
    const value = localStorage.getItem(key)
    if (value && value != "undefined" && value != "null") {
      return <T>JSON.parse(value)
    }
  },
  // 删除数据
  remove(key: string) {
    localStorage.removeItem(key)
  }
};

/**
 * 封装操作sessionStorage本地存储的方法
 */
export const sessionStorage = {
  //存储
  set(key: string, value: any) {
    window.sessionStorage.setItem(key, JSON.stringify(value))
  },
  //取出数据
  get<T>(key: string) {
    const value = window.sessionStorage.getItem(key)
    if (value && value != "undefined" && value != "null") {
      return JSON.parse(value)
    }
    return null
  },
  // 删除数据
  remove(key: string) {
    window.sessionStorage.removeItem(key)
  }
}

login

登录成功后进行token保存

<script setup lang="ts">
import { useStore } from 'vuex'
import { storage } from '@/utils/storage/storage'
const stores = useStore()
const state = reactive({
  user: '',
  pwd: '',
  result: [],
})

async function login() {
  user.Login(state.user, state.pwd).then((res) => {
    state.result = res.data.split(',')
    if (state.result[0] === '1') {
      storage.set('token', 'Bearer ' + state.result[1])
    }
  })
}
</script>

axios

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  if (
    config.method === "post" ||
    config.method === "put" ||
    config.method === "delete"
  ) {
    // qs序列化
    config.data = qs.parse(config.data);
  }
  // 鉴权token , 给头部带上token
  if (storage.get('token')) {
    config.headers.Authorization = storage.get('token');
  }
  return config;
}, error => {
  return Promise.reject(error.data.error.message);
})

全局前置守卫

// 导航守卫
// 使用 router.beforeEach 注册一个全局前置守卫，判断用户是否登陆
router.beforeEach((to, from, next) => {
  if (to.path === "/Login") {
    next();
  } else {

    const token = storage.get('token')
    if (token === undefined || token === "") {
      next("/Login");
    } else {
      next();
    }
  }
});