前端Vue 路由权限控制文档格式.docx
《前端Vue 路由权限控制文档格式.docx》由会员分享，可在线阅读，更多相关《前端Vue 路由权限控制文档格式.docx（16页珍藏版）》请在冰豆网上搜索。
progress
bar
nprogress/nprogress.css'
bar
style
Cookies
js-cookie'
screenfull
screenfull'
router.beforeEach（async
（to,
from,
next）
=>
{
const
token
=
Cookies.get（'
token'
）
NProgress.start（）
if
（token）
如果已经处于登录状态，跳到登录页重定向到首页
（to.path
===
/login'
）
next（{
path:
/'
}）
NProgress.done（）
}
else
（!
store.state.authorized）
try
router.addRoutes（await
store.dispatch（'
setAccessRoutes'
））
setAllDict'
...to,
replace:
true
catch
（e）
Cookies.remove（'
userInfo'
}
next（）
全屏参数判断该页面是否全屏
screenfull.isEnabled）
return
（to.meta
&
to.meta.fullScreen）
screenfull.request（）.catch（（）
null）
（screenfull.isFullscreen）
screenfull.exit（）
next（to.path
!
==
?
{
:
true）
router.afterEach（（）
由于路由是动态注册的，所以项目的初始路由就会很简洁，只要提供基础的路由，其他路由都是从服务器返回之后动态注册进来的
router.js
Vue
vue'
Router
vue-router'
Login
modules/Login'
NoPermission
modules/NoPermission'
Vue.use（Router）
Fixed
NavigationDuplicated
Problem
originalPush
Router.prototype.push
Router.prototype.push
function
push（location,
onComplete,
onAbort）
（onComplete
||
return
originalPush.call（this,
location,
onAbort）
location）.catch（err
err）
createRouter
（）
new
Router（{
mode:
history'
scrollBehavior:
（{
y:
0
}）,
routes:
[
redirect:
/platform'
},
/noPermission'
component:
NoPermission
Login
]
createRouter（）
export
resetRouter（）
newRouter
router.matcher
newRouter.matcher
reset
router
default
webpack之前不支持动态编译，所以很多项目都在路由表维护了一份映射表如下：
routerMap
user:
import（'
/views/user'
）,
role:
/views/role'
...
我觉得这样很不nice，最新版的vue-cli集成的webpack已经可以支持动态导入啦，因此可以把所有的路由信息全部放到数据库里面配置，前端不在需要维护一份router的映射关系表啦，如果你是老版的CLI，可以使用dynamic-import
我们再来看看下面这个神奇的文件，也可以大致浏览一下然后看下面的解释
menu.json
id:
随便是什么规则，只要唯一就行，这里前端写死ID而不是每次导入数据库时候再生成是因为如果每次入库的时候重新生成会丢失之前的关联关系
title:
菜单的标题
name:
唯一标识
type:
MD'
代表模块（子系统）,'
MN'
代表菜单，'
BT'
代表按钮，如果需要控制到按钮权限则需要配置到BT级别
icon:
菜单的图标
uri:
菜单的路由地址
componentPath:
该菜单在对应前端项目的路径，在后续的store.js会看到用法，就是上述说的不需要在写一份routerMap
hidden:
作为菜单的时候是否在左侧显示，有些菜单比如某个列表的详情页，需要注册到实例中，但是并不需要在左侧菜单栏显示
noCache:
由于项目页面增加了缓存控制，因此该字段用于判断当前页面是否需要缓存
fullScreen:
有些菜单，进入的时候就是全屏展示的，例如某些大屏展示页面，通过该字段配置
children:
和上述字段一样
"
id"
00b82eb6e50a45a495df301b0a3cde8b"
title"
SV
ADMIN"
name"
type"
MD"
children"
06f1082640a0440b97009d536590cf4f"
系统管理"
system"
icon"
el-icon-setting"
uri"
/system"
componentPath"
modules/Layout"
MN"
b9bd920263bb47dbbfbf4c6e47cc087b"
用户管理"
principal"
views/system/principal"
b37f971139ca49ab8c6506d4b30eddb3"
新增"
create"
BT"
d3bcee30ec03432db9db2da999bb210f"
编辑"
edit"
7c2ce28dcedf439fabc4ae9ad94f6899"
删除"
delete"
bdf4d9e8bf004e40a82b80f0e88c866c"
修改密码"
resetPwd"
ba09f8a270e3420bb8877f8def455f6f"
选择角色"
setRole"
c47c8ad710774576871739504c6cd2a8"
角色管理"
role"
views/system/role"
81c0dca0ed2c455d9e6b6d0c86d24b10"
19a2bf03e6834d3693d69a70e919d55e"
6136cc46c45a47f4b2f20e899308b097"
ad5cf52a78b54a1da7c65be74817744b"
设置菜单"
setMenu"
8b5781640b9b4a5cb28ac616da32636c"
资源管理"
resource"
views/system/resource"
d4182147883f48069173b7d173e821dc"
935fcb52fffa45acb2891043ddb37ace"
3f99d47b4bfd402eb3c787ee10633f77"
fc8194b529fa4e87b454f970a2e71899"
HMI"
eb5370681213412d8541d171e9929c84"
启动检测"
"
001"
06eb36e7224043ddbb591eb4d688f438"
设备信息"
002"
76696598fd46432aa19d413bc15b5110"
AI模型库"
003"
2896f3861d9e4506af8120d6fcb59ee1"
保养维修"
004"
91825c6d7d7a457ebd70bfdc9a3a2d81"
继续"
005"
24694d28b2c943c88487f6e44e7db626"
暂停"
006"
225387753cf24781bb7c853ee538d087"
结束"
007"
以上是前端的路由配置信息，之前提到过，路由是后端返回的，为什么前端还有一份菜单文件呢？
因为路由里面的内容全部都是前端需要使用的，比如菜单显示的图表，菜单对应的前端路径等等...既然和前端关系比较大，所以前端维护该文件更适合，而不是让后端去配置XML或者liquibase。
你每次菜单有修改的时候要通知你的后台要更新一下数据库，然后切换多个环境的时候每个后台都要通知一声...后台还不一定乐意X你...然后你想改个小图标都要小心翼翼被你的后台大佬怼...
当然如果是多环境部署的话还是让后台使用liquibase比较合适，但是开发模式下前端完全可以自己玩。
等到需要多环境（不同数据库）同时部署的时候，你把sql语句给后端就OK了，文章下面会提到怎么导出sql...
Question:
既然前端有该文件，是不是意味着路由的源码又暴露出去了，那和别人的猜路径就可以访问有什么区别？
不是说好了从数据库拉取菜单信息，你跟我直接用这个json，那数据库咋整？
别急...
Answer:
1.这只是前端用来mock的配置文件，build的时候不会打包该内容。
2.在用户角色菜单这些关联关系还没有建立之前，菜单只能通过mock来建立，这个时候直接读取前端的配置文件...额，真香，具体是怎么做到的可以看下面store.js的做法
3.菜单始终由前端来维护，当需要上线的时候，前端可以通过node将menu.json生成SQL语句导入到数据库中。
后面会介绍
接下来就是如何注册这些路由表了
store.js
Vuex
vuex'
Cookie
NotFound
modules/NotFound'
resetRouter
../router'
getUserResourceTree,
getDictAllModel
apis'
deepClone
utils/tools'
此处的IS_TESTING就是用来判断当前是拉取数据库的真实菜单还是直接用前端的menu.json，在资源的关联关系还没有建立之前非常有用
IS_TESTING
@/config'
Message
element-ui'
Vue.use（Vuex）
生产可访问的路由表
（routes,
cname
routes.reduce（（prev,
type,
path,
componentPath,
name,
title,
icon,
redirectUri:
redirect,
hidden,
fullScreen,
noCache,
children
[]
}）
是菜单项就注册到路由进去
（type
prev.push（{
path,
此处就
升级会员 