vue3+ts使用pinia存储用户信息，并进行权限管理

最新推荐文章于 2025-02-26 17:11:51 发布

STUPID MAN

最新推荐文章于 2025-02-26 17:11:51 发布

阅读量2.3k

点赞数 8

文章标签： javascript vue.js 前端 vue3 vue3+ts pinia

本文链接：https://blog.youkuaiyun.com/qq_42261895/article/details/135866590

版权

本文介绍了如何在Vue3项目中集成Pinia存储状态管理库，创建用于用户信息管理和角色/权限检查的模块，以及在VueRouter中实现基于角色的访问控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、先在vue3项目中下载pinia

npm install pinia

2、main.ts中添加pinia

import { createPinia } from 'pinia'
const pinia = createPinia();
app.use(router)
app.use(pinia)
app.mount('#app')

3、创建user.ts对登录用户进行管理（UserInfo为自定义对象）

import { defineStore } from 'pinia'
import { useStorage } from '@vueuse/core'
import { ref, reactive, onMounted } from 'vue'
import type {UserInfo} from '@/model/projectmodel'

export const useUserStore = defineStore('user', {
    state: () => ({
        user: {
            id:"",
            username:"",
            password: "",
            salt: "",
            roles: [],
            permissions: []
        }
    }),
    actions: {
        setUser(user:UserInfo) {
            this.user = user;
        },
        getUser() {
            return this.user;
        }
    }
}

最低0.47元/天解锁文章