vue实现不同用户权限的方法

Vue 实现不同用户权限的方法

在项目中，实现不同用户的权限控制是常见的需求也是常见的功能模块，例如管理系统中不同角色（管理员、普通用户等）应有不同的访问权限，小程序、App等在不同角色登入的时候显示的首页以及跳转访问不同的页面。本文将以 vue 为主要的代码框架介绍几种常见的权限控制方式。

1. 基于路由守卫的权限控制

1.1 方案概述

基于 Vue Router 的 beforeEach 进行全局路由守卫控制。我们可以在 vuex 或 pinia 中存储用户角色，并在路由的 meta 字段中定义允许访问的角色。

1.2 实现步骤

1. 在 router 配置中为每个路由添加 meta 字段，存储允许访问的角色。
2. 在 Vuex/Pinia 中存储用户角色。
3. 使用 router.beforeEach 进行权限校验。

1.3 代码示例

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import store from '@/store';

// 引入多个组件页面 
import Home from '@/views/Home.vue';
import Admin from '@/views/Admin.vue';
import AddSomeFun from '@/views/AddSomeFun.vue';
import Login from '@/views/Login.vue';

// 定义路由，并且在 meta 中定义可访问的角色
const routes = [
  { path: '/', component: Home },
  { path: '/admin', component: Admin, meta: { roles: ['admin'] } },
  { path: '/addSomeFun', component: AddSomeFun, meta: { roles: ['user'] } },
  { path: '/login', component: Login }
];

// 创建路由
const router = createRouter({
  history: createWebHistory(),
  routes
});

// 路由校验
router.beforeEach((to, from, next) => {
  const userRole = store.state.userRole; // 假设 Vuex 中存储了用户 user、管理员 admin 角色
  if (to.meta.roles && !to.meta.roles.includes(userRole)) {
    next('/'); // 无权限跳转到首页
  } else {
    next();
  }
});

export default router;

2. 基于 Vue 指令的权限控制

2.1 方案概述

使用 Vue 指令 v-permission 来控制按钮、组件或模块的显示隐藏。

2.2 实现步骤

1. 在 Vue 全局创建一个自定义指令 v-permission。
2. 在 main.js 引入注册。
3. 该指令根据用户权限判断是否显示该元素。

2.3 代码示例

// directives/permission.js
// 指令封装
import { useStore } from 'vuex';

export default {
  install(app) {
    app.directive('permission', {
      mounted(el, binding) {
        const store = useStore();
        const userRole = store.state.userRole;
        if (!binding.value.includes(userRole)) {
          el.parentNode?.removeChild(el);
        }
      }
    });
  }
};

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';
import permissionDirective from './directives/permission';

const app = createApp(App);
app.use(store);
app.use(permissionDirective); // 注册自定义指令
app.mount('#app');

<!-- 使用示例 -->
<button v-permission="['admin']">仅管理员可见</button>

3. 基于 Vuex（或 Pinia）的权限控制

3.1 方案概述

在 Vuex/Pinia 中存储权限信息，并在组件中通过 computed 计算属性动态控制组件或按钮的显示。

3.2 代码示例

// store/index.js
import { createStore } from 'vuex';

export default createStore({
  state: {
    userRole: 'user' // 假设存储用户角色
  },
  mutations: {
    setUserRole(state, role) {
      state.userRole = role;
    }
  }
});

<!-- 在组件中使用 Vuex 进行权限判断 -->
<template>
  <button v-if="userRole === 'admin'">仅管理员可见</button>
</template>

<script>
import { computed } from 'vue';
import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();
    const userRole = computed(() => store.state.userRole);
    return { userRole };
  }
};
</script>

4. 后端返回权限控制

4.1 方案概述

后端返回权限控制的方式有两种：

1. 返回用户权限信息：前端获取角色信息后，使用前述方法进行权限控制。
2. 后端返回可访问路由 ：后端返回用户可以访问的路由列表，前端使用 router.addRoute 动态注册。

4.2 代码示例（后端返回路由）

// 登录后获取用户权限，并动态添加路由
import router from '@/router';
import store from '@/store';
import axios from 'axios';

async function fetchUserRoutes() {
  const res = await axios.post('/common/getUserRoutes'); // 假设后端返回路由信息
  const routes = res.data
  
  routes.forEach(route => {
    router.addRoute(route);
  });
}

fetchUserRoutes();

5. 总结

方法	适用场景	优势	缺点
路由守卫	页面级权限控制	适用于完整页面权限	无法控制按钮等细节
Vue 指令	组件、按钮级权限	适用于 UI 级别权限	需要手动移除元素
Vuex/Pinia	组件级权限	适用于灵活权限判断	需要在多个组件中维护权限逻辑
后端返回权限	适用于大规模权限管理	后端统一管理，灵活	需要动态更新前端路由

以上几种方式可以结合使用，根据实际业务需求选择合适的权限控制方式。