vue 前端权限控制

什么是前端权限控制

一般来说，在管理系统中，权限控制分为以下2种情况：1、页面级访问权限；2、页面操作权限 如：增删改。

而这2种情况的本质，都是从视觉上的隔离，目的是为了让用户体验变得更友好。真正的数据安全则是由后端控制。

权限控制需要做什么

• 侧边栏菜单的显示。
• 进入无权限路由时的拦截。
• 进入权限页面时，页面操作的显示。

实现思路

• 路由配置一份完整的路由表，在需要权限的路由上配置 meta: { permissions: ['home_1'] }。
• 根据 permissionList 和路由表，生成侧边栏菜单。
• 在 router.beforeEach 钩子中获取用户权限 permissionList，对即将跳转的页面做权限验证；1、to.path === "/" 根路由时，跳转第一个有权限的菜单页；2、获取路由权限配置，校验权限。

代码实现

配置路由表，此处只举例component模块路由配置，export 的 MenuBase 是为了方便生产侧边栏菜单；permissions 即权限，分别保存在MenuBase、route meta中，方便后续使用。

// router/index.ts
import Vue from "vue";
import VueRouter, { RouteConfig } from "vue-router";
import { routes as loginRoutes } from "@/router/login";
import { routes as homeRoutes } from "@/router/home";
import { routes as componentRoutes } from "@/router/component";
import { routes as chartRoutes } from "@/router/chart";

Vue.use(VueRouter);

const routes: Array = [
  ...loginRoutes,
  {
    path: "/",
    component: () => import("@/layout/Layout.vue"),
    children: [...homeRoutes, ...componentRoutes, ...chartRoutes]
  }
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

export default router;


// router/compo