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

// 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;

// 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>

// 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>

// 登录后获取用户权限，并动态添加路由
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();