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

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

ruisui883个月前 (01-12)技术分析23

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

跟着我一起来学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实战篇|使用路由管理用户权限(动态路由)” 的相关文章

发行版Vanilla OS 2发布稳定版:彻底重写、改变使用Linux的方式

Vanilla OS 是去年崭露头角的 Linux 发行版,最初的 1.0 版本基于 Ubuntu 构建 —— 亮点之一是系统核心“不可变”。后来改用 Debian 测试分支 (Debian Sid),免费且开源,默认桌面环境是 GNOME。什么是不可变 Linux 发行版?不可变发行版确保操作系统...

vue项目-父页面数据变化使子页面更新的几种情况

当操作页面时候,特别是增删改操作之后,数据会有所改变,这个时候我们希望组件中的数据要和最新数据一致,就需要重新更新渲染。以下是针对几种不同情况下方式:一.子页面调用接口后重新渲染1.使用ref方式父组件中用ref=“xxx” 来声明子组件,然后通过在父组件值改变的地方来调用子组件中的方法this.$...

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

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

你感动了吗?佳能超规格镜头 RF 24-105mm F2.8深度测评

如果要你选一支用作多题材创作的挂机镜头,那我相信很多人会选择24-105mm这个焦段的镜头。作为一支可以实现从广角到长焦的变焦镜头,24-105mm有着丰富的焦段选择。只是基于镜头体积以及光学结构上的限制,此前的24-105mm镜头只能恒定在F4的光圈。而佳能打破了这一限制,将实用焦段和恒定光圈完美...

最快清除数组空值?分享 1 段优质 JS 代码片段!

本内容首发于工粽号:程序员大澈,每日分享一段优质代码片段,欢迎关注和投稿!大家好,我是大澈!本文约 600+ 字,整篇阅读约需 1 分钟。今天分享一段优质 JS 代码片段,用最简洁的代码清除了数组中的空值。老规矩,先阅读代码片段并思考,再看代码解析再思考,最后评论区留下你的见解!const arr...

分享15个基于Vue3.0全家桶的优秀开源项目

大家好,我是 Echa。今天来分享 15 个基于 Vue3.0 全家桶的优秀开源项目!1. Vue Admin Bettergithub : https://github.com/chuzhixin/vue-admin-bettervue admin better 对比其他来源 admin 框架有如...