vue3 使用pinia存储用户信息、axios拦截请求添加token、用户权限约束操作方法

最新推荐文章于 2025-04-03 23:03:53 发布

Zw Min

最新推荐文章于 2025-04-03 23:03:53 发布

阅读量4.5k

点赞数 15

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/Zwain_M/article/details/136709197

版权

一、使用pinia

安装pinia
安装pinia-plugin-persistedstate

vue根目录创建stores，创建indexjs，内容如下：

import {
    createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'

// app.use(createPinia().use(persist))
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