vue3實現登錄和token驗證

參考：[https://www.cnblogs.com/web-record/p/9876916.html]:

登錄過程

1. 登錄成功返回 token
2. 拿到token，將token存儲到localStorage或store中，並跳轉路由頁面
3. 跳轉路由，就判斷 localStroage 中有無 token
4. 調后端接口，都要在請求頭中加token
5. 前端拿到狀態碼為401，就清除token信息並跳轉到登錄頁面

localStroage封裝

/**
 * 封裝操作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)
    }
    return key
  },
  // 刪除數據
  remove(key: string) {
    localStorage.removeItem(key)
  }
}

/**
 * 封裝操作sessionStorage本地存儲的方法
 */
export const sessionStorage = {
  /**
   * 存儲
   * @param key
   * @param value
   */
  set(key: string, value: any) {
    window.sessionStorage.setItem(key, JSON.stringify(value))
  },
  /**
   * 取出數據
   * @param key
   */
  get(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)
  }
}

進行登錄賦值

用戶信息

配置用戶默認標識和清除用戶信息

//userInfo.ts
import { storage } from '@/utils/storage/storage'

/**
 * 用戶信息
 */
export enum userInfo {
  ROLE = 'role',
  TOKEN = 'token',
  ID = 'id',
  NAME = 'name'
}
/**
 * 清除用戶storage信息
 */
export const removeUserStorage = () => {
  storage.remove(userInfo.ROLE)
  storage.remove(userInfo.ID)
  storage.remove(userInfo.NAME)
  storage.remove(userInfo.TOKEN)
}

登錄頁面

import { storage } from '@/utils/storage/storage'

const state = reactive({
  name: '',
  pwd: ''
})
function login() {
  UserApi.login(state.name, state.pwd).then(res => {
    const ret = res.data
    removeUserStorage() //清除登錄信息
    storage.set(userInfo.ROLE, ret.nickname) // 角色名
    storage.set(userInfo.TOKEN, `Bearer ${ret.token}`) // token
    storage.set(userInfo.ID, ret.id) // 用戶主鍵
    storage.set(userInfo.NAME, ret.name) // 用戶名
    message.success('登錄成功')
    routers(rRouter.articleTable) //進行跳轉
  })
}

axios加token

// 請求攔截器 
service.interceptors.request.use(
    (config: AxiosRequestConfig) => {
      const { method, data, headers } = config
      removePending(config)
      cancel.cancel_request && addPending(config)

      if (['post', 'put', 'delete'].includes(method as string)) {
        config.data = qs.parse(data) //序列化
      }
      // 若是有做鑒權token , 就給此處頭部帶上token 
      if (storage.get('token')) {
        if (headers) {
          headers.Authorization = storage.get('token') as string
        }
      }
      return config
    },
    error => {
      return Promise.reject(error.data.error.message)
    }
  )