浅谈vue权限管理实现及流程

/ router/indes.js /
/ 初始路由 /
let router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/login',
      name: 'login',
      ponent: () => import('@/views/login.vue'),
    },
  ]
});

/ router/indes.js /
/ 准备动态添加的路由 /
export const dynamicRoutes = [
  {
    path: '/',
    name: 'home',
    ponent: () => import('@/views/home.vue'),
    meta: {
      requiresAuth: true,
    },
    children: [
      // 用户信息
      {
        path: '/user-info',
        name: 'user-info',
        ponent: () => import('@/views/user-setting/user-info.vue'),
      },
      // 修改密码
      {
        path: '/user-password',
        name: 'user-password',
        ponent: () => import('@/views/user-setting/user-password.vue'),
      },
    ]
  },
  {
    path: '/403',
    ponent: () => import('@/views/error-page/403'),
  },
  {
    path: '',
    ponent: () => import('@/views/error-page/404'),
  },
];

/ router/router.js /
export default [
  // 部署管理
  {
    path: '/deploy-manage',
    name: 'deploy-manage',
    ponent: () => import('@/views/sys-admin/deploy-manage/deploy-manage.vue'),
    meta: {
      permitName: 'deploy-manage',
    }
  },
  // ...
];

/ login.vue /
// 发送登录请求
vm.$http.login(params, data => {
  sessionStorage.token = data.token;
  // ...

  // 跳转到首页 home。这里会触发全局路由拦截 router.beforeEach
  vm.$router.push({ name: 'home' });
}, err => {
  console.log(err);
});

/ 全局路由拦截 /
router.beforeEach((to, from, next) => {
  // 根据有没有token判断是否登录
  if (!sessionStorage.token) {
    // 1、当用户打开localhost，to.matched === []，匹配的是空路由，此时需要重定向到login
    // 2、重定向到login之后，to.matched === [name: "login", path: "/login"...] 就是上一步的login页面
    // to.matched.some(item => item.meta.requiresAuth) 这句的意思是 进入的路由页需要登录认证，取反就是不用登录，直接通过
    if (to.matched.length > 0 && !to.matched.some(item => item.meta.requiresAuth)) {
      next(); // 跳过，进入下一个导航钩子。比如在 /login 路由页刷新页面会走到此逻辑
    } else {
      next({ path: '/login' });
    }
  } else {
    // 现在有token了
    if (!store.state.permission.permissionList) {
      // 如果没有 permissionList，发请求获取用户权限列表
      store.dispatch('permission/FETCH_PERMISSION').then(() => {
        next({ path: to.path, query: to.query });
      });
    } else {
      // 现在有 permissionList 了
      if (to.path !== '/login') {
        if (to.matched.length === 0) {
          // 如果匹配到的路由形如 https://172.24.1.117/?id=xxx&name=xxx，表明是关联跳转时没有权限，跳转到403
          next({ path: '/403' });
        } else if (queryChange) {
          // 跳转之前将路由中查询字符串为空的过滤掉，如 xxx.?page=&size= 这种
          next({ name: to.name, params: to.params, query: to.query });
        } else if (sessionStorage.isSysLock === 'true' && to.path !== '/sys-lock') {
          next({ path: '/sys-lock' });
        } else {
          next();
        }
      } else {
        // 1.如果用户手动在地址栏输入 /login，重定向到之前的路由页
        // next(from.fullPath);

        // 2.如果用户手动在地址栏输入 /login，清除token并刷新页面，就会去到登录页
        store.mit('goToLogin');
      }
    }
  }
});

/ permission.js /
/ 由于权限这块逻辑很多，所以在vuex添加了一个permission模块来处理权限相关的逻辑和变量 /
import httpRequest from '@/assets/js/service/http'; // http请求
import handleModule from '@/assets/js/mon/handle-module'; // 处理路由、侧边栏的公共函数
import router, { dynamicRoutes } from '@/router/index'; // 默认路由配置，动态路由配置
import permissionRouter from '@/router/router'; // 需要权限的路由配置
// ...
export default {
  // ...
  actions: {
    async FETCH_PERMISSION({ mit, state }) {
      // 初始化路由表，注意这里必须写，router.beforeEach 路由拦截时，多次执行 FETCH_PERMISSION
      mit('setPermission', []);

      // 发请求获取后端返回的用户权限
      let data = await getUserByToken();
      let userPopedoms = data.userPopedoms || [];

      // 保存用户的权限模块（去除掉用户管理和登录），用户管理模块可以使用，权限列表
      let userPopeList = userPopedoms.filter(v => v.requestMapping !== 'user-manage' && v.requestMapping !== 'login');
      mit('setUserPopedoms', userPopeList);

      // 根据权限筛选出我们设置好的路由并加入到 path='/' 的children，就是home路由的children下
      let routes = handleModule.getRouter(userPopedoms, permissionRouter);
      let homeContainer = dynamicRoutes.find(v => v.path === '/');

      // 使用concat的目的是让 分配给用户的权限处于 children 的第0项
      homeContainer.children = routes.concat(homeContainer.children);
      // 设置首页重定向，重定向到用户权限的第0项
      homeContainer.redirect = homeContainer.children[0].name;

      // 根据权限生成左侧导航菜单
      let sidebarMenu = handleModule.getSidebarMenu(userPopeList);
      mit('setMenu', sidebarMenu);

      // 初始路由
      let initialRoutes = router.options.routes;
      // 动态添加路由。只有刷新页面才会清空动态添加的路由信息
      router.addRoutes(dynamicRoutes);
      // 完整的路由表
      mit('setPermission', [...initialRoutes, ...dynamicRoutes]);
    }
  },
};

[
 {
  "moduleGroupId": 1001,
  "moduleGroupName": "部署管理",
  "requestMapping": "deploy-manage",
 },
 {
  "moduleGroupId": 1100,
  "moduleGroupName": "系统管理",
  "requestMapping": "sys-manage",
  "moduleList": [
   {
    "moduleId": 1101,
    "moduleName": "系统日志",
    "requestMapping": "system-log",
    "moduleGroupId": 1100,
   },
   {
    "moduleId": 1102,
    "moduleName": "系统告警",
    "requestMapping": "sys-alert",
    "moduleGroupId": 1100,
   },
  ],
 }
]

/ handle-module.js /
const handleModule = {
  /
    根据后台返回的权限，以及配置好的所有路由，过滤出真实路由
    @param {Array} permissionList 后台返回的用户权限列表
    @param {Array} allRouter 前端配置好的所有动态路由的集合
    @return {Array} 过滤后的路由
   /
  getRouter(permissionList = [], allRouter = []) {
    // permissions 的格式为 ["deploy-manage", "system-log"]
    let permissions = permissionList.reduce((a, cur) => {
      if (cur.moduleList && cur.moduleList.length > 0) cur = cur.moduleList;
      return a.concat(cur);
    }, []).map(v => v.requestMapping);

    return allRouter.filter(item => permissions.includes(item.meta.permitName));
  },

  /
    根据后台返回的权限，生成侧边栏
    @param {Array} permissionList 后台返回的用户权限列表
    @return {Array} sidebarMenu 生成的侧边栏数组
   /
  getSidebarMenu(permissionList = []) {
    let sidebarMenu = [];
    permissionList.forEach(item => {
      let menuItem = {
        name: item.requestMapping,
        title: item.moduleGroupName,
      };
      menuItem.children = (item.moduleList || []).map(child => ({
        name: child.requestMapping,
        title: child.moduleName,
      }));
      sidebarMenu.push(menuItem);
    });

    return sidebarMenu;
  }
};
export default handleModule;

{
    path: '/',
    name: 'home',
    ponent: () => import('@/views/home.vue'),
    meta: {
      requiresAuth: true,
    },
    children: [
      / 将上面得到的路由加入到这里 /
      // 用户信息
      {
        path: '/user-info',
        name: 'user-info',
        ponent: () => import('@/views/user-setting/user-info.vue'),
      },
    ]
}