功能概述:

  • 根据后端返回接口,实现路由动态显示
  • 实现按钮(HTML元素)级别权限控制

涉及知识点:

  • 路由守卫
  • Vuex使用
  • Vue自定义指令

导航守卫

前端工程采用Github开源项目Vue-element-admin作为模板,该项目地址:Github | Vue-element-admin

Vue-element-admin模板项目的src/permission.js文件中,给出了路由守卫、加载动态路由的实现方案,在实现了基于不同角色加载动态路由的功能。我们只需要稍作改动,就能将基于角色加载路由改造为基于权限加载路由。

导航守卫:可以应用于在路由跳转时,对用户的登录状态或权限进行判断。项目中使用全局前置守卫。参考Vue官方文档:https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

后台返回接口



权限系统后台采用基于角色的权限控制方案(role-based access control),如上图所示,

该用户信息接口将查询用户所具有的所有角色,再将这些角色的权限并集按照路由 - 操作整合在一起返回。在用户登录入系统后,我们从后台请求获得用户信息(个人信息 + 权限信息),作为全局属性储存在前端。不同权限的用户看到的页面不同,依赖于这些属性,它们决定了路由如何加载、页面如何渲染。

这种多个组件依赖一组属性的场景,Vue提供了VueX作为全局状态管理方案。

使用VueX存储权限信息

src/store/moudules目录下定义permission.js

1.定义异步方法,方法内部包含HTTP请求从后台拉取数据

import http from '../../axios';
async function getUserInfo() {
const res = await http.getUserInfo();
return res;
}

使用await关键字,保证执行顺序正确。这里是为了保证能拿到接口返回的内容,以便于下一步处理。

const actions = {
getPermissions({ commit }) {
return new Promise(resolve => {
getUserInfo().then(res => {
if (res) {
let permissionList = res.permissionList;
commit('SET_PERMISSIONS', permissionList);
// 根据后台返回的路由,生成实际可以访问的路由
let accessRoutes = filterAsyncRoutesByPermissions(asyncRoutes, permissionList);
commit('SET_ROUTES', accessRoutes);
commit('SET_USER_INFO', { name: res.name, accountName: res.accountName })
resolve(accessRoutes);
} else {
resolve([]);
}
}).catch(() => resolve([]));
})
}
}

VueX中action定义异步方法。

2. 定义静态、动态路由

src/router/index.js

静态路由:

export const constantRoutes = [
{
path: '/redirect',
component: Layout,
hidden: true,
children: [
{
path: '/redirect/:path(.*)',
component: () => import('@/views/redirect/index'),
},
],
,
...
{
path: '/404',
component: () => import('@/views/error-page/404'),
hidden: true,
}
];

动态路由:

export const asyncRoutes = [
{
path: '/system',
component: Layout,
name: '系统管理',
meta: { title: '系统管理', icon: 'el-icon-user', affix: true },
children: [
{
path: '/system',
component: () => import('@/views/management/system/Index'),
meta: { title: '系统管理', icon: 'el-icon-setting', affix: true },
},
],
}
...
]

静态路由中定义了所有用户均可访问的路由,动态路由中定义了动态加载的路由。

3.根据权限过滤并排序路由

export function filterAsyncRoutesByPermissions(routes, menus) {
const res = []
routes.forEach(route => {
const tmp = { ...route }
let index = menus.map(menu => menu.url).indexOf(tmp.path);
if (index != -1) {
// 后端返回路由信息覆盖前端定义路由信息
tmp.name = menus[index].name;
// debugger;
tmp.meta.title = menus[index].name;
tmp.children.forEach(child => {
if (child.path == tmp.path) {
child.meta.title = tmp.meta.title;
}
})
res.push(tmp)
}
});
// 根据返回菜单顺序,确定路由顺序
/**
* TODO 子菜单排序
*/
res.sort((routeA, routeB) => menus.map(menu => menu.url).indexOf(routeA.path) - menus.map(menu => menu.url).indexOf(routeB.path))
return res
}

根据url匹配,匹配到url的路由则加入数组。最终用户可以访问的路由 = 允许访问的动态路由 + 不需要权限的静态路由。

4.src/permission.js中的处理逻辑

// 引入store
import store from './store';
const whiteList = ['/login', '/auth-redirect']; // no redirect whitelist // 路由守卫
router.beforeEach(async (to, from, next) => {
//start progress bar
NProgress.start()
if (hasToken) {
if (to.path === '/login') {
// ... 省略登出逻辑
NProgress.done();
} else {
// 查看是否已缓存过动态路由
const hasRoutes = store.getters.permission_routes && store.getters.permission_routes.length > 0;
if (hasRoutes) {
next();
} else {
try {
const accessRoutes = await store.dispatch('permission/getPermissions');
router.addRoutes(accessRoutes);
const toRoute = accessRoutes.filter((route) => route.path == to.path);
next({ path: toRoute.length > 0 ? toRoute[0].path : accessRoutes[0].path, replace: true });
} catch (error) {
next(`/login?redirect=${to.path}`);
NProgress.done();
}
}
}
} else {
if (whiteList.indexOf(to.path) !== -1) {
// in the free login whitelist, go directly
next();
} else {
next(`/login?redirect=${to.path}`);
NProgress.done();
}
}
}); router.afterEach(() => {
// finish progress bar
NProgress.done();
});

以上是动态路由实现方案。


Vue支持自定义指令,用法类似于Vue原生指令如v-modelv-on等,网上查阅到的大部分细粒度权限控制方案都使用这种方法。下面将给出我的实现。

自定义指令

自定义指令 v-permission

src/directive/permission/index.js

import store from '@/store'
export default {
  inserted(el, binding, vnode) {
    const { value } = binding
    const permissions = store.getters && store.getters.permissions;
    if (value) {
      // 获取当前所挂载的vue所在的上下文节点url
      let url = vnode.context.$route.path;
      let permissionActions = permissions[url];
      // console.log(permissionActions)
      const hasPermission = permissionActions.some(action => {
        if (value.constructor === Array) {
          // 或判断: 只要存在任1,判定为有权限
          return value.includes(action);
        } else {
          return action === value;
        }
      })
      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error(`need further permissions!`)
    }
  }
}

后端给出的权限数据是路由(url)与操作的对应Map,url可以通过将要挂载到的vnode属性拿到。这个方法有点类似于AOP,在虚拟元素挂载之后做判断,如果没有权限则从父元素上移除掉。

使用方法:

  • 举例一:单个按钮 (注意双引号套单引号的写法)
  <el-button @click.native.prevent="editUser(scope.row)" type="text" size="small" v-permission="'op_edit'">
编辑
</el-button>
  • 举例二:或判断(传入数组),只要拥有数组中一个权限,则保留元素,所有权限都没有,则移除。

    在上一篇博客https://www.jianshu.com/p/066c4ce4c767

    下拉菜单上增加控制:





    相应数据定义中增加action属性。

该方法无法覆盖所有场景,所以依然给出相应工具类:

/**
*
* @param {*当前页面路由} url
* @param {*操作code e.g op_add } value
* @return true/false 是否有该项权限
*/
function checkPermission(url, value) { const permissions = store.getters && store.getters.permissions;
let permissionActions = permissions[url]; if (!permissionActions) {
return false;
} let hasPermission = permissionActions.some(action => {
if (value.constructor === Array) {
// 或判断: 只要存在任1,判定为有权限
return value.includes(action);
} else {
return action === value;
}
});
return hasPermission; }

以上完成按钮粒度权限控制。

Vue | 自定义指令和动态路由实现权限控制的更多相关文章

  1. Vue自定义指令实现按钮级权限控制功能

    思路: 登录:当用户填写完账号和密码后向服务端验证是否正确,验证通过之后,服务端会返回一个token,拿到token之后(我会将这个token存贮到sessionStorage中,保证刷新页面后能记住 ...

  2. Vue自定义指令使用场景

    当你第一次接触vue的时候,一定会使用到其中的几个指令,比如:v-if.v-for.v-bind...这些都是vue为我们写好的,用起来相当的爽.如果有些场景不满足,需要我们自己去自定义,那要怎么办呢 ...

  3. Vue自定义指令使用方法详解 和 使用场景

    Vue自定义指令的使用,具体内容如下 1.自定义指令的语法 Vue自定义指令语法如下: Vue.directive(id, definition) 传入的两个参数,id是指指令ID,definitio ...

  4. vue 自定义指令(directive)实例

    一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href  v-bind:class  v-bind:title  v-bind:bb 2.v-on:用于监听DOM事件: 例 ...

  5. vue自定义指令要点

    vue自定义指令的基础使用这里就不阐述,看官网文档:https://cn.vuejs.org/v2/guide/custom-directive.html 本文用一个实例描述自定义指令的要点,自定义一 ...

  6. vue自定义指令

    Vue自定义指令: Vue.directive('myDr', function (el, binding) { el.onclick =function(){ binding.value(); } ...

  7. vue 自定义指令的使用案例

    参考资料: 1. vue 自定义指令: 2. vue 自定义指令实现 v-loading: v-loading,是 element-ui 组件库中的一个用于数据加载过程中的过渡动画指令,项目中也很少需 ...

  8. vue自定义指令(Directive中的clickoutside.js)的理解

    阅读目录 vue自定义指令clickoutside.js的理解 回到顶部 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: vue自定义指令 一般在需要 DOM 操 ...

  9. Vue自定义指令报错:Failed to resolve directive: xxx

    Vue自定义指令报错 Failed to resolve directive: modle 这个报错有2个原因: 1.指令单词拼错 2.Vue.directive() 这个方法没有写在 new Vue ...

随机推荐

  1. 将BX中的数以二进制形式在屏幕上显示出来。

    问题 将BX中的数以二进制形式在屏幕上显示出来. 代码 code segment assume cs:code main proc far start: mov bx,011001100110b ;假 ...

  2. Python os.lchflags() 方法

    概述 os.lchflags() 方法用于设置路径的标记为数字标记,类似 chflags(),但是没有软链接.高佣联盟 www.cgewang.com 只支持在 Unix 下使用. 语法 lchfla ...

  3. C/C++编程笔记:C++入门知识丨函数和函数模板

    本篇要学习的内容和知识结构概览 函数的参数及其传递方式 1. 函数参数传递方式 传值: 传变量值: 将实参内存中的内容拷贝一份给形参, 两者是不同的两块内存 传地址值: 将实参所对应的内存空间的地址值 ...

  4. 《分享》Graphql入门与实践

    最近项目用到了graphql,学习了一些并在公司做了一个小分享,希望对你有帮助 一.介绍 Graphql是一种面向数据的API查询语言 Graphql给前端提供一种强力的查询工具,我们可以根据自己定义 ...

  5. 华为云GaussDB(DWS)内存知识点,你知道吗?

    前言 在日常数据库的使用中,难免会遇到一些内存问题.此次博文主要向大家分享一些华为云数仓GaussDB(DWS)内存的基本框架以及基本视图的使用,以便遇到内存问题后可以有一个基本的判断. 注意,本篇博 ...

  6. apicloud版人人商城app打包教程

    一.APP环境搭建和配置编译1.登录APICLOUD后台新建应用 步骤一 .注册账号注册apicloud 账号并登录APICLOUD控制台 注册apicloud 账号:https://www.apic ...

  7. 网络安全传输系统-sprint1传输子系统

    一.产品规划与设计 二.传输子系统 基本框架:(1)不带安全功能的传输系统 (2)安全加密功能 part1:基本传输子程序设计(不带安全加密功能) 客户端 服务器 int main(int argc, ...

  8. windows下Nginx+RTMP部署

    在windows下部署参考博客:https://blog.csdn.net/l1028386804/article/details/80022437 参考这个部署完成后,一般没有什么问题,可以看到视频 ...

  9. Python笔试——毕业旅行问题

    毕业旅行问题 小明目前在做一份毕业旅行的规划.打算从北京出发,分别去若干个城市,然后再回到北京,每个城市之间均乘坐高铁,且每个城市只去一次.由于经费有限,希望能够通过合理的路线安排尽可能的省一些路上的 ...

  10. zuul路由网关集成ssl,实现http到https的转变

    1 前言 最近几天刚开始接触微信小程序的开发,才接触到了https的概念(微信小程序中的请求必须为https请求,不然请求无法成功).https算是对http的安全封装,在http的基础上加了ssl证 ...