vue3实现登录和token验证
vue3实现登录和token验证
参考:[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)
}
)