vue3前端在已有项目中增加权限管理具体步骤和代码

在Vue3项目中添加权限管理通常涉及以下几个步骤：

1. **选择权限库**：
Vue有很多第三方权限管理库可供选择，如Vuetify Admin、vue-element-admin等。其中Vuex-Cartier是一个轻量级的权限解决方案，它基于Vuex状态管理模式。

2. **安装依赖**：
对于Vuex-Cartier，你可以通过npm或yarn安装：

   npm install vuex-cartier --save

3. **配置权限**：
首先，在store文件夹下创建一个`auth.js`文件，配置初始权限状态：

   import Cartier from 'vuex-cartier'
   
   const cartier = new Cartier({
     roles: ['admin', 'user'], // 角色列表
     defaultRole: 'guest', // 默认角色
   })
   
   export default cartier.state()

4. **划分模块**：
创建一个`modules/auth.js`文件，处理登录、登出、获取用户信息以及角色相关的actions和mutations：

   import { mapActions, mapGetters } from 'vuex'
   import { login, logout, getUserInfo } from '@/api/auth' // 假设有一个API接口

   export default {
     state() {},
     actions: {
       login({ commit }, payload) {
         return login(payload).then(response => commit('SET_USER_INFO', response.data))
       },
       logout({ commit }) {
         // 清除本地存储或session
         commit('LOGOUT')
       },
       ...mapActions(['login', 'logout'])
     },
     mutations: {
       SET_USER_INFO(state, data) {
         state.userInfo = data
       },
       LOGOUT(state) {
         state.userInfo = null
       },
       ...mapMutations(['SET_USER_INFO', 'LOGOUT'])
     },
     getters: {
       isLoggedIn: mapGetters('auth', 'isLoggedIn'),
       userInfo: mapGetters('auth', 'userInfo')
     }
   }

5. **保护路由**：
使用Vue Router的beforeEach守卫检查用户是否有权限访问特定页面。例如：

   import { useStore } from '@/store'
   router.beforeEach((to, from, next) => {
     const store = useStore()
     if (store.getters.isLoggedIn && !cartier.hasRole(to.meta.requiredRoles)) {
       // 如果未满足权限要求，跳转到登录页或提示
       next('/login')
     } else {
       next()
     }
   })

6. **组件内权限检查**：
在需要检查权限的组件中使用计算属性或watch来判断是否允许操作：

<template>
  <div v-if="canDoSomething">可以操作</div>
  <div v-else>无权操作</div>
</template>

<script>
import { computed } from 'vue'

export default {
  computed: {
    canDoSomething() {
      return cartier.hasRole('admin') || this.userInfo.role === 'admin';
    }
  }
}
</script>