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();
    }
  }
});