没有合适的资源？快使用搜索试试~ 我知道了~

文库首页行业研究行业报告前端Vue 路由权限控制.pdf

前端Vue 路由权限控制.pdf

1.该资源内容由用户上传，如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款（资源遇到问题，请及时私信上传者）

版权申诉

vue.js

0 下载量 100 浏览量 2023-02-22 20:58:09 上传评论收藏 1.43MB PDF 举报

温馨提示

试读

23页

.【前端】Vue 路由权限控制.pdf

资源推荐

资源详情

资源评论

Vue 路由权限控制

当我们在做后台管理系统的时候，都会涉及到系统左侧的菜单树如何动态

显示的问题。目前基本上都是 RBAC 的解决方案，即 Role-Based

Access Control ，权限与角色相关联，用户通过成为适当角色的成员而

得到这些角色的权限。这就极大地简化了权限的管理。

vue 有很多优秀的后台管理系统模板，这些开源项目都提供了 RBAC 权限

控制的思路，但是在实际项目中，写死角色的方式可能并不适合。

看了网上蛮多的解决方案，个人感觉都有弊端，好多都是前端先把完整的

路由表注册到项目中，然后通过后台返回树过滤显示的方案，这样的做法

其实只是隐藏了左侧菜单，但是路由还是已经注册进去了，用户猜到访问

路径还是可以轻易进入页面，没有真正的做到动态路由加载

以下是我设计的解决方案， -。-

先看一下已经完成的系统结构，便于理解，用户绑定角色 (一对多 )，角色

绑定菜单 (一对多 )

用户菜单

选择角色

角色菜单

选择菜单，由于本项目是多系统，所以会有 ADMIN 和 HMI 两个子系

统，后面再来解释

资源管理 (我这里没有叫做菜单管理，因为会涉及到各个子系统我称作模

块，模块下面有菜单，菜单下面有按钮 )

好了，看完几张图大家估计也明白了这就是典型的 RBAC 。内部具体怎么

运作的呢

要实现动态添加路由，即只有有权限的路由才会注册到 Vue 实例中，核

心是 vue-router 的 addRoutes 和导航钩子 beforeEach 两个方法

大体思路为，在 beforeEach 方法中 (即每次路由跳转之前做判断 )，如果

已经加载了路由表，则把路由表注册到实例中，如果没有，则从后端拉取

路由表注册到实例中。那为什么不在登录的时候加载一次就可以了呢？这

是因为如果只是登录的时候加载一次，网页刷新的时候注册的路由表会丢

失，所以我们统一在 beforeEach 这个钩子中去实现

// permission.js,此文件在 main.js 中直接导入即可，这边的思路是仿照的 element-admin

import router from './router'

import store from './store'

import NProgress from 'nprogress' // progress bar

import 'nprogress/nprogress.css' // progress bar style

import Cookies from 'js-cookie'

import screenfull from 'screenfull'

剩余22页未读，继续阅读

评论收藏

内容反馈

1.该资源内容由用户上传，如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款（资源遇到问题，请及时私信上传者）

版权申诉

资源评论

资源反馈

评论星级较低，若资源使用遇到问题可联系上传者，3个工作日内问题未解决可申请退款~

春哥111

粉丝: 1w+

上传资源快速赚钱

我的内容管理展开

我的资源快来上传第一个资源

我的收益

登录查看自己的收益

我的积分登录查看自己的积分

我的C币登录后查看C币余额

我的收藏

我的下载

下载帮助

前往需求广场，查看用户热搜

前端Vue 路由权限控制.pdf

基于 Vue 的前端权限管理.pdf

前端框架vue面试题.pdf

Vue03. Vue.js 高级开发.pdf_前端学习资料

第四章前端路由与Vue-Router.pdf

一种基于Vue.js和Django的权限控制方法及系统.pdf

07-vue-router详解.pdf

100道Vue.js 面试题（含答案）.pdf

Vue.js面试题.pdf

前端vue经典面试题78道（重点详细简洁）.pdf

基于Vue的前端流程管理系统及方法.pdf

《Vue.js 2实用指导教程》PDF+源代码

Vue.js 最浅显易懂的API手册.pdf

vue-element-admin v4.4 指南.pdf

VUE面试.pdf

vue-router与项目.rar

管理系统系列--vue后台管理系统（自由编写）.zip

前端开发vue框架实现的后台管理系统

10天快速掌握Vue3核心开发技巧.pdf

jenkins部署vue前端

avue-cli后台模板文档.pdf

Day07_路由_vant组件库使用(1).pdf

Shiro+Vue实现前后端分离项目解决方案.pdf

基于Vue框架开发的学生管理系统.pdf

Vue面试题(供参考).pdf

3208432-Spring Boot+Spring Cloud+Vue+Element项目实战：手把手教你开发权限管理系统.pdf

基于Spring Boot、Spring Cloud、Vue.js 、Element UI实现权限管理系统，JAVA快速开发平台

springboot+vue+mybatisplus前后端分离项目实战-手牵手带小白做毕业设计-水印.pdf

springboot+vue-element-admin前后端分离项目实战（神盾特工管理系统一期）-水印发行.pdf

基于SpringBoot Vue前后端分离模式的物业管理系统设计与实现.pdf

最新资源