一、使用pinia
安装pinia
安装pinia-plugin-persistedstate
vue根目录创建stores,创建indexjs,内容如下:
import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'
const pinia=createPinia()
pinia.use(persist)
export default pinia
export * from './user'
stores文件中再创建user.js,完整代码如下:
import { ref } from 'vue'
import { defineStore } from 'pinia'
import axios from 'axios';
import permissions from '@/hook/permissions.json'
export const useUserCounter = defineStore('user', () => {
const userInfo = ref({})
const setUserInfo = async () => {
await axios.get("/api/get_user_information").then(res => {
if (res.data.code === "1000") {
userInfo.value = res.data.data
}
}, res => {
console.log('请求失败')
});
}
const clearUserInfo = () => {
userInfo.value = {}
sessionStorage.removeItem('refresh_token')
sessionStorage.removeItem('Authorization')
}
const hasPermission = (name) =>{
let flag = false
let permissionId = null
permissions.forEach(item =>{
if(name === item.name){
permissionId = item.id
}
})
if(permissionId && userInfo.value.permission){
if(userInfo.value.permission.split(',').indexOf((permissionId.toString())) != -1){
flag = true
}
}
return flag
}
return { userInfo,setUserInfo,clearUserInfo,hasPermission }
}, {
persist: true
})
其中permissions.json是所有权限的数组列表。
二、登录获取access_token、refresh_token
登录页中先引入user.js
import {useUserCounter} from '@/stores/user'
const userStore = useUserCounter()
登录成功时将接口返回的access_token、refresh_token存入sessionStorage
ElMessage({
showClose: true,
message: "登录成功",
type: "success",
});
setTimeout(function () {
router.push("/");
isSubLoadding.value = false;
}, 800);
sessionStorage.setItem('Authorization', res.data.data.access_token)
sessionStorage.setItem('refresh_token', res.data.data.refresh_token)
userStore.setUserInfo()
存储token后调用setUserInfo()方法更新userInfo,包含了所有用户信息数据。
三、给axios添加拦截器
在main.js中,引入pinia相关
import pinia from './stores/index'
app.use(pinia)
import { useUserCounter } from '@/stores/user'
const userStore = useUserCounter()
引入axios,设全局
import axios from 'axios'
app.provide('axios', axios)
拦截器完整代码:
const service = axios.create({
baseURL: '/api',
timeout: 5000,
headers: {
'Authorization': `Bearer ${sessionStorage.getItem('refresh_token')}`
}
})
service.setToken = (token) => {
sessionStorage.setItem('Authorization', token)
}
axios.interceptors.request.use(config => {
if (sessionStorage.getItem('Authorization')) {
config.headers.Authorization = `Bearer ${sessionStorage.getItem('Authorization')}`
}
return config
}, error => {
return Promise.reject(error);
})
let isRefreshing = false
let requests = []
axios.interceptors.response.use(response => {
const config = response.config
if (response.data.code === 401) {
if (!isRefreshing) {
isRefreshing = true
const refresh_token = sessionStorage.getItem('refresh_token')
if (refresh_token) {
refreshToken(refresh_token).then(res => {
const token = res.data.access_token
service.setToken(token)
config.headers['Authorization'] = `Bearer ${token}`
config.baseURL = ''
requests.forEach(cb => cb(token))
requests = []
return service(config)
}).catch(res => {
userStore.clearUserInfo()
router.push('/login')
}).finally(() => {
isRefreshing = false
})
} else {
userStore.clearUserInfo()
router.push('/login')
}
}
}
return response
}, error => {
return Promise.reject(error);
})
const refreshToken = async (token) => {
service.defaults.headers['Authorization'] = `Bearer ${token}`
return service.get('/refresh').then(res => res.data)
}
四、约束操作权限例子
引入user.js
import {useUserCounter} from '@/stores/user'
const userStore = useUserCounter()
获取userinfo
const userinfo = userStore.userInfo
使用方法如下:
<p class="text-right m-b">
<el-button type="primary" size="small" icon="CirclePlus" @click="createMainPhase"
v-if="userStore.hasPermission('添加项目任务')">添加阶段</el-button>
</p>
给方法传对应权限参数,查询userinfo.permission中是否存在该权限,返回true/false。