Vue3如何实现登录流程及基于token的用户验证机制？

本文共计564个文字，预计阅读时间需要3分钟。

参考以下内容进行

登录过程：完成登录操作后，获取token。将token存储在localStorage或store中，并跳转至路由页面。判断localStorage中是否有token，如果没有则调用后端。

参考：[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) } )