vue3实现登录和token验证

最新推荐文章于 2024-04-16 11:53:35 发布

叫我少年

最新推荐文章于 2024-04-16 11:53:35 发布

阅读量1.4k

点赞数 2

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_35624605/article/details/131792358

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

该文章描述了前端登录过程中如何处理token，包括登录成功后将token存储在localStorage，请求头中添加token，以及接收到401状态码时清除token并重定向到登录页面。同时，文章还展示了对localStorage和sessionStorage的封装方法以及axios的请求拦截器设置。

摘要由CSDN通过智能技术生成

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

登录过程

登录成功返回 token
拿到token，将token存储到localStorage或store中，并跳转路由页面
跳转路由，就判断 localStroage 中有无 token
调后端接口，都要在请求头中加token
前端拿到状态码为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)
    }
  )