前端如何做权限管理

前端如何做权限管理

前言

工作之中，我们肯定做过权限管理相关的项目，现就从前端的角度来说一说前端是如何做权限管理的。 对于前端来说，权限管理就是让用户只可以看到自己拥有权限的页面和组件，本质就是用户自己的权限和页面/组件的权限进行比对。

页面级别的权限

我们可以将页面的权限点写在路由的 meta 里面，然后利用路由守卫或动态路由来进行权限的判断处理。
这里为了演示，用户拥有的权限是写死的，真实项目中应该从接口中获取，然后存在store，再从store中获取。

• 全局路由守卫

  const routes: Array<RouteRecordRaw> = [
    {
      path: "/",
      name: "Home",
      component: Home,
    },
    {
      path: "/about",
      name: "About",
      component: () =>
        import(/* webpackChunkName: "about" */ "../views/About.vue"),
      meta: { authcode: 'about' }
    },
    {
      path: "/test",
      name: "Test",
      component: () =>
        import(/* webpackChunkName: "test" */ "../views/Test.vue"),
      meta: { authcode: 'test' }
    },
    {
      path: "/401",
      name: "401",
      component: Forbidden,
    },
  ];
  

  router.beforeEach((to, _from, next) => {
    // 这里为了演示，是写死的，真实项目中应该从接口中获取，然后存在store，再从store中获取
    const userAuths = ['test']
    const { authcode } = to.meta
    if (authcode) {
      if (userAuths.includes(authcode + '')) {
        next()
      } else {
        next('401')
      }
    } else {
      next()
    }
  })
  

• 动态路由

  该方案是将路由分成两部分，一部分需要权限，一部分不需要权限；然后对需要权限的路由进行过滤处理，最后再和不需要权限的路由进行合并，生成最终的路由。

    const defaultRoutes: Array<RouteRecordRaw> = [
      {
        path: "/",
        name: "Home",
        component: Home,
      },
      {
        path: "/401",
        name: "401",
        component: Forbidden,
      },
      {
        path: "/404",
        name: "404",
        component: NotFound,
      },
      {
        path: '/:pathMatch(.*)*',
        redirect: { name: '404'}
  
      },
    ]
    const dynamicRoutes: Array<RouteRecordRaw> = [
      {
        path: "/about",
        name: "About",
        component: () =>
          import(/* webpackChunkName: "about" */ "../views/About.vue"),
        meta: { authcode: 'about' }
      },
      {
        path: "/test",
        name: "Test",
        component: () =>
          import(/* webpackChunkName: "test" */ "../views/Test.vue"),
        meta: { authcode: 'test' }
      }
    ];
    function filterRoute(originRoutes: Array<RouteRecordRaw>) {
      const userAuths = ['test']
      return originRoutes.filter((ele) => userAuths.includes(ele.meta!.authcode as string))
    }
  
    const routes = defaultRoutes.concat(filterRoute(dynamicRoutes))
  

组件级别的权限

很多时候，只做页面级别的权限是远远不够的。经常存在这样的需求，页面所有人都可以查看，但是有的人有权限进行操作，而有的人则没有权限进行操作，此时就要求将权限做到组件级别。
还是同样的原理，用户自己的权限和组件的权限进行比对。 对于vue来说，我们可以利用 v-if 来进行控制组件的显示/隐藏。