当前位置:首页 > 技术分析 > 正文内容

Vue实战篇|使用路由管理用户权限(动态路由)

ruisui885个月前 (01-12)技术分析42

权限控制是后台管理系统比较常见的需求,如果我们需要对某些页面的添加权限控制的话,那我们可以在路由管理中的权限做一些校验,没有通过权限校验的给出相应的提示或者直接跳转到报错页面。

跟着我一起来学vue实战篇路由管理权限吧!

权限校验函数

  • getCurrentAuthority()函数用于获取当前用户权限,一般来源于后台数据
  • check()函数用于权限的校验匹配
  • isLogin()函数用于检验用户是否登录

路由配置元信息

  • 路由配置元信息meta:{ authority: ["admin"] }

路由守卫router.beforeEach中判断

  • 使用to.matched获取跳转路由的全部信息,包括父路由和子路由
  • 使用lodash中的findLast匹配离跳转路由配置权限的元信息
  • 引入auth.js中check()和isLogin()进行判断是否具有权限或是否已登录
  • 如果没有权限则给出提示信息后跳转到403页面,未登录则返回登录页面

运行结果

  • 当getCurrentAuthority()函数返回admin时,则菜单会显示所有元信息meta:{ authority: ["admin"] }的路由菜单;
  • 如返回值为user时,菜单会显示所有元信息meta:{ authority: ["user"] }的路由菜单

以上就是我们权限控制中路由管理的全部内容,关注我获取"实战篇"获取源码!

接下来CrabFort会带大家一起实现更加精细化的权限设计(权限组件、权限指令)

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/214.html

标签: vue路由传值
分享给朋友:

“Vue实战篇|使用路由管理用户权限(动态路由)” 的相关文章

财务未来:数字化全流程自动化报销,让预算管理更轻松

财务管理是企业经营的重中之重,费控管理则是财务管理的核心之一。上至管理层下至普通员工,面对繁琐的费控管理却是“家家有本难念的经”。举个常见的例子:在传统企业的费用管理模式下,员工在进行商务活动时,通常需要自行垫资,之后再经过一系列繁杂的报销审批流程,才能最终实现打款。对于普通员工来说,申报流程繁琐,...

程序员开发必会之git常用命令,git配置、拉取、提交、分支管理

整理日常开发过程中经常使用的git命令![送心]git配置SSH刚进入项目开发中,我们首先需要配置git的config、配置SSH方式拉取代码,以后就免输入账号密码了!# 按顺序执行 git config --global user.name "自己的账号" git config -...

30 个纯 HTML5 实现的游戏

浏览器和 JavaScript 的功能逐年不断的变强变大。曾几何时,任何类型的游戏都需要Flash。但随着 HTML5 发展,HTML5 + WebGL 游戏式就慢慢占领着这个舞台。以下是30款流行的游戏,它们可以在所有现代浏览器中运行,并且只使用web技术构建。1. HexGL地址:http://...

学前端,这30个CSS选择器,你必须熟记

你学会了基本的id,class类选择器和descendant后代选择器,然后就觉得完事了吗?如果这样,你就会错过许多灵活运用CSS的机会。虽然本文提到的许多选择器都属于CSS3,并且只能在现代的浏览器中使用,但学会这些是大有好处的。什么是CSS选择器呢?每一条css样式定义由两部分组成,形式如下:[...

vue-router是如何解析query参数呢? #前端

vue-router 中的 query 解析。1. 大家好,我是龙仔。今天来分享 vue-router 是如何解析快乐参数的,因为使用 vue 路由会传 query 参数和快乐参数,所以从 vue 的角度来看如何解析传递的快乐参数。2. 基础知识大家应知道,快乐参数结构如:a、b、c、a、b、c、a...

从 Vue2.0 到 React17——React 开发入门

作者:佚名来源:前端大全前言找工作时发现有一些公司是以React作为技术栈的,而且薪资待遇都不错,为了增加生存的筹码,所以还是得去学一下React,增加一项求生技能。因为我用Vue2.0开发项目已经四年了,故用Vue2.0开发项目的思路来学习React。前端项目是由一个个页面组成的,对于Vue来说,...