knowLedge-页面或者按钮权限设置（ Vuex状态管理）

哟哟耶耶

已于 2024-08-20 16:20:34 修改

阅读量795

点赞数 30

分类专栏： One knowledge per day learn or imporve 文章标签：前端 javascript

于 2024-08-20 16:07:53 首次发布

本文链接：https://blog.csdn.net/2301_76671906/article/details/141360608

版权

learn or imporve 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

One knowledge per day

12 篇文章 0 订阅

订阅专栏

1.前言

在具体的项目开发过程中，对于不同的用户角色拥有不同的操作权限与可操作页面不同；需要超级管理员进行对不同的用户角色进行权限分配比如对于不同的用户角色同一页面的不同按钮的操作权限会有所不同；下面具体的实现逻辑总结；

2.实现

2.1逻辑

权限获取：首先，从后端接口获取当前用户的权限信息，这些信息通常包括用户的角色和具体的权限列表。
权限存储：将获取的权限信息存储在前端的全局状态管理系统中（如Vuex、Redux等），以便在应用的任何部分都能够方便地访问。
权限校验：在用户尝试访问某个页面或执行某个操作时，通过比对用户的权限和所需权限来进行校验。

利用Vuex进行全局状态管理，对于页面的操作权限以及按钮的权限控制，通常涉及到用户认证，角色管理以及根据用户角色或权限动态显示或者隐藏页面元素。

2.2VueX

Vuex 是 Vue.js 应用程序的状态管理模式和库。它主要解决在 Vue 应用中多个组件之间共享状态的问题，特别是当这些组件之间没有直接的父子关系时。Vuex 提供了集中的状态存储和管理，以及相应的规则来确保状态以一种可预测的方式发生变化。

2.2.1 Vuex 的核心概念

State（状态）：Vuex 使用单一状态树（Single State Tree），即用一个对象就包含了全部的应用层级状态。
Getters（获取器）：类似于 Vue 中的计算属性，Getters 允许我们对 Store 中的数据进行加工处理形成新的数据，并且这些数据是响应式的，当依赖的 State 发生变化时，Getters 会重新求值。
Mutations（变更）：更改 Vuex 的 Store 中的状态的唯一方法是提交 mutation。Mutation 必须是同步函数。
Actions（动作）：Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态；Action 可以包含任意异步操作。
Modules（模块）：由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，Store 对象就有可能变得相当臃肿。为了解决这个问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

2.2.2 使用 Vuex 的步骤
安装 Vuex：如果你使用 Vue CLI 创建的项目，Vuex 会被自动安装。否则，你需要通过 npm 或 yarn 来安装它。
创建 Store：在你的 Vue 应用中创建一个新的 .js 文件（例如 store.js）来定义 Vuex store。在这个文件中，你需要导入 Vue 和 Vuex，然后调用 Vuex.createStore() 方法来创建你的 store。
提供 Store：在创建 Vue 实例时，通过 store 选项将创建的 store 注入到 Vue 应用中。
在组件中使用 Store：在组件中，你可以通过 this.$store 访问 store，并且可以通过 commit 方法提交 mutation 来改变状态，或者通过 dispatch 方法来分发 action。同时，你也可以使用计算属性和 Getter 来获取 store 中的状态。

// store.js  
import Vue from 'vue';  
import Vuex from 'vuex';  
  
Vue.use(Vuex);  
  
export default new Vuex.Store({  
  state: {  
    count: 0  
  },  
  mutations: {  
    increment(state) {  
      state.count++;  
    }  
  },  
  actions: {  
    incrementIfOdd({ commit, state }) {  
      if ((state.count % 2) === 1) {  
        commit('increment');  
      }  
    }  
  },  
  getters: {  
    evenOrOdd: state => state.count % 2 === 0 ? 'even' : 'odd'  
  }  
});

Vue 组件中的使用

<template>  
  <div>  
    <p>{{ count }}</p>  
    <p>{{ evenOrOdd }}</p>  
    <button @click="incrementIfOdd">Increment if odd</button>  
  </div>  
</template>  
  
<script>  
export default {  
  computed: {  
    count() {  
      return this.$store.state.count;  
    },  
    evenOrOdd() {  
      return this.$store.getters.evenOrOdd;  
    }  
  },  
  methods: {  
    incrementIfOdd() {  
      this.$store.dispatch('incrementIfOdd');  
    }  
  }  
}  
</script>

创建了一个简单的 Vuex store 来管理一个 count 状态。定义了一个 mutation 来增加 count 的值，一个 action 来在 count 为奇数时提交这个 mutation，以及一个 getter 来返回 count 是偶数还是奇数的描述在 Vue 组件中通过计算属性和方法来访问这些状态和逻辑。

2.3权限显示设置

2.3.1. 设计Vuex Store

首先，在Vuex store中设计一个模块来管理用户的权限信息。这个模块可能包含用户的角色、权限列表等信息。

// store/modules/permission.js  
export default {  
  namespaced: true,  
  
  state: () => ({  
    userRoles: [],  // 用户角色列表  
    permissions: [] // 用户权限列表  
  }),  
  
  mutations: {  
    SET_ROLES(state, roles) {  
      state.userRoles = roles;  
    },  
    SET_PERMISSIONS(state, perms) {  
      state.permissions = perms;  
    }  
  },  
  
  actions: {  
    fetchRolesAndPermissions({ commit }, userId) {  
      // 模拟从后端获取角色和权限  
      return new Promise((resolve, reject) => {  
        setTimeout(() => {  
          const roles = ['admin', 'editor'];  
          const permissions = ['view_page', 'edit_content', 'delete_content'];  
          commit('SET_ROLES', roles);  
          commit('SET_PERMISSIONS', permissions);  
          resolve();  
        }, 1000);  
      });  
    }  
  },  
  
  getters: {  
    hasPermission: (state) => (permission) => {  
      return state.permissions.includes(permission);  
    },  
    // 其他getters...  
  }  
};

2.3.2在Vue组件中使用Vuex Getter

Vue组件中，通过Vuex的getter来检查用户是否具有某个权限，并据此决定是否显示或启用某个按钮。

<template>  
  <div>  
    <button v-if="hasEditPermission" @click="editContent">编辑内容</button>  
  </div>  
</template>  
  
<script>  
import { mapGetters } from 'vuex';  
  
export default {  
  computed: {  
    ...mapGetters('permission', ['hasPermission']),  
    hasEditPermission() {  
      return this.hasPermission('edit_content');  
    }  
  },  
  methods: {  
    editContent() {  
      // 编辑内容的逻辑  
    }  
  },  
  created() {  
    // 假设这里你已经通过某种方式（如登录后）触发了actions中的fetchRolesAndPermissions  
  }  
};  
</script>

2.3.3. 路由守卫中控制页面访问

对于某些需要特定权限才能访问的页面，在Vue Router的全局守卫或路由独享守卫中检查用户权限，并据此进行重定向或显示错误信息。

// router/index.js  
import store from '@/store';  
  
router.beforeEach((to, from, next) => {  
  const requiredPermission = to.meta && to.meta.permission;  
  if (requiredPermission && !store.getters['permission/hasPermission'](requiredPermission)) {  
    // 用户没有权限访问该页面，重定向到登录页或其他页面  
    next({ path: '/login', query: { redirect: to.fullPath } });  
  } else {  
    next();  
  }  
});  
  
// 在路由定义中使用meta字段指定所需权限  
{  
  path: '/edit',  
  component: EditPage,  
  meta: { permission: 'edit_content' }  
}