vue权限控制的实现

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

权限控制是一种安全机制，用于管理系统中用户对资源或功能的访问权限。通过权限控制，系统可以确保用户只能访问其具有权限的资源或执行其具有权限的操作，从而保障系统的安全性和完整性。
例如在人资管理系统中，主页就是单位所有人都可以访问的，而比如财务页面由具有财务专员或者是有权限的的人可以访问的，在此小结一下权限访问。

一、 vue中权限控制的方法有哪些？

在Vue.js中实现权限控制的方法通常有以下几种：

1.1 基于路由的静态权限控制

a. 在路由定义时，通过添加meta字段，标记需要登录或需要特定权限的路由。
b. 使用导航守卫（beforeEach）来检查用户权限，确保用户只能访问其有权限的页面。

1.2 基于组件的动态权限控制

a. 在组件内部进行权限控制的逻辑判断。
b. 根据用户角色或权限动态展示或隐藏组件。

1.3 动态生成路由

a. 根据用户的角色或权限动态生成路由。
b. 在用户登录后，根据其权限信息向路由表中添加相应的路由。

1.4 基于后端接口的权限控制

a. 在后端定义权限规则，前端通过调用接口获取用户的权限信息。
b. 根据后端返回的权限信息，动态控制页面的展示或隐藏。

1.5 混合使用

可以结合以上多种方法，根据项目的具体需求和复杂程度，选择合适的权限控制方案。
项目的规模、复杂度以及团队的技术栈综合考虑，决定了使用哪种方法或者混用。

---

二、 vue权限控制之静态路由

本文展示动态路由和静态路由的使用方法

1.定义静态路由

在路由配置文件中定义路由信息，包括路由路径、组件以及需要的权限等信息。
views文件夹的Home，AdminDashboard，EmployeeDashboard都是提前写好的vue组件

// router/index.js

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/Home.vue';  //主页
import AdminDashboard from '@/views/AdminDashboard.vue';   //管理员页面
import EmployeeDashboard from '@/views/EmployeeDashboard.vue';   //员工页面

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      meta: { requiresAuth: true } 
       //路由元信息定义一个requiresAuth,若登录后可跳转则值设为true，后面根据这个值判断是否用户是否登录而判断是否跳转到login页面
    },
    {
      path: '/admin',
      name: 'AdminDashboard',
      component: AdminDashboard,
      meta: { requiresAuth: true, role: 'admin' }
      //路由元信息定义一个role，方便后续判断是否匹配
    },
    {
      path: '/employee',
      name: 'EmployeeDashboard',
      component: EmployeeDashboard,
      meta: { requiresAuth: true, role: 'employee' }
    },
    // other routes...
  ]
});

export default router;

2.路由守卫：在路由守卫中对路由进行权限验证，根据用户的登录状态和角色信息来判断是否有权限访问路由。

// router/index.js

router.beforeEach((to, from, next) => {
  const isAuthenticated = checkAuth(); // 检查用户是否登录
  const userRole = getCurrentUserRole(); // 获取用户角色
  if (to.meta.requiresAuth && !isAuthenticated) {
    // 用户未登录，重定向到登录页面
    next('/login');
  } else if (to.meta.role && to.meta.role !== userRole) {
    // 用户角色不匹配，重定向至403页面
    next('/403');
  } else {
    // 用户有权限访问，放行
    next();
  }
});

---

三、 vue权限权限控制之动态路由

1.步骤

1. 定义基础路由：定义一个基础的路由，用于展示登录页面和公共页面。

写好路由之后引入

import Login from '@/views/Login.vue';
import NotFound from '@/views/NotFound.vue';

2. 登录后获取用户信息：用户登录成功后，根据用户角色信息从后端获取相应的权限信息。

3. 动态添加路由：根据用户的权限信息动态生成路由，并将生成的路由添加到路由表中。

2.代码如下

// router/index.js

import Vue from 'vue';
import Router from 'vue-router';
import Login from '@/views/Login.vue';
import NotFound from '@/views/NotFound.vue';
import store from '@/store';

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    // other public routes...
    {
      path: '*',
      name: 'NotFound',
      component: NotFound
    }
  ]
});

router.beforeEach((to, from, next) => {
  const isAuthenticated = checkAuth(); // 检查用户是否登录
  if (to.path === '/login') {
    // 如果是登录页面，直接放行
    next();
  } else {
    if (!isAuthenticated) {
      // 用户未登录，重定向到登录页面
      next('/login');
    } else {
      if (store.getters['user/hasRouteAccess'](to)) {
        // 用户有权限访问该路由，放行
        next();
      } else {
        // 用户无权限访问该路由，重定向至403页面
        next('/403');
      }
    }
  }
});

export default router;

我们用到了vuex，在 Vuex 中定义一个用于存储用户信息和权限信息的模块

// store/modules/user.js

const state = {
  userInfo: null,
  userRoutes: []
};

const mutations = {
  SET_USER_INFO(state, userInfo) {
    state.userInfo = userInfo;
  },
  SET_USER_ROUTES(state, userRoutes) {
    state.userRoutes = userRoutes;
  }
};

const actions = {
  login({ commit }, userInfo) {
    // 用户登录逻辑...
    commit('SET_USER_INFO', userInfo);
    // 根据用户信息获取用户的权限信息，并动态生成路由
    const userRoutes = generateRoutes(userInfo.role);
    commit('SET_USER_ROUTES', userRoutes);
  }
};

const getters = {
  hasRouteAccess: state => to => {
    // 判断用户是否有访问某个路由的权限
    return state.userRoutes.some(route => route.path === to.path);
  }
};

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
};

---

总结

自留复盘，欢迎指正🫡🫡🫡