vue 中后台权限设计

权限控制是中后台系统常见的需求，一般指根据系统设置的安全规则或者安全策略，用户可以访问而且只能访问自己被授权的资源。 以下demo的做法是将菜单和路由结合起来，并接受后端传回的用户权限信息，通过对路由管理来做权限的校验，对于没有通过权限校验的用户进行提示或者跳转到相应的页面。

获取当前用户的权限：

export function getCurrentAuth() { // 接口请求数据 return [“admin”]; // 模拟后台返回的用户权限 }

验证路由定义的权限是否在当前用户权限中：

export function check(auth) { const current = getCurrentAuth(); return current.some(item => auth.includes(item)); }

判断用户是否登录：

export function isLogin() { const current = getCurrentAuth(); return current $$ current !== ‘guest’; }

在路由守卫中做判断，根据路由设定的权限，判断用户是否有访问权限：

Import Vue from “vue” import findLast form “lodash/findLast ” import NProgress form “nprogress ” // 页面跳转进度条组件 import Layout from '@/layout' import Router form “vue-router ” Import {check, isLogin} from “/utils/auth” Vue.use(Router ) cost router = new Router({ mode: “history”, routes: [ { path: '/redirect', component: Layout, hidden: true, children: [ { path: '/redirect/:path*', component: () => import('@/views/redirect/index') } ] }, { // 登录页面路由 path: “/login”, hidden: true component: () => import('@/views/login/index') }, { ... }, }); router.beforeEach((to, from, next) => { If (to.path !== from.path) { NProgress.start(); } const record = findLast(to.matched, record => record.meta.authority) // 获取路由定义的权限信息 If (record && !check(record.meta.authority) ) { // 验证权限是否符合 If(!isLogin() && to.path !== “/user/login”){ // 判断是否登录 next({ path: “/user/login” }) } else if (to.path !== “/403”) { next({ path: “/403” }) } NProgress.done(); // 结束进度条 } next(); }); router.afterEach(() { NProgress.done(); }); export default router

修改菜单展示内容，只展示用户拥有权限的菜单：

import {check} from “/utils/auth” methods:{ getUserMenu(routes = [], parentKeys = [], selectedKey) { const menuData = []; for (let item of routes) { If (item.meta.authority && !check(item.meta.authority )) { // 过滤路由 Break; } ... } } }

页面内部的权限校验方式，编写权限检验组件Authorized：

<script> import {check} from “@/utils/auth”; Export default { functional: true; props: { authority: { type: Array, required: true } }, render:(h, context) { const {props, scopedSlots} = context; Retrun check(props.authority) ? scopedSlots.default() : null; } } </script>

并注册该组件为全局组件Vue.component(“Author”,Author) 页面中使用方法：

<Author :authority: "['admin', 'user']"> <button type="warning">编辑</button> </Author>