大体流程

参考资料:

nx-admin项目地址

首先这里就不讲解vue和vuex之类的基础东西了 有兴趣的可以去官方文档了解。这里根据流程走向大概说说

路由配置

首先找到路由配置,路由配置放在了src/router/index.js路由配置里暴露了两个常量 一个是 constantRouterMap 另外一个是 asyncRouterMap 这里先说说constantRouterMap。 nx-admin的权限验证大概是

  • 1 默认大家都能访问的页面,不需要权限, 都访问的页面定义为 constantRouterMap
  • 2 需要登录或者需要权限的页面路由定义为 asyncRouterMap

根据后台获取到用户信息role(权限)的不同来动态加载asyncRouterMap中meta.role的权限对应的页面

登录成功后做的事情

点击登录以后 左侧的侧边栏有导航列表。 这里提出两个疑问?

  • 根据路由配置说的 动态加载对应的权限路由 那么侧边栏那么多路由 肯定不能写死吧?
  • 我点击登录后 那些登录流程怎么走的?用户权限存在哪里?token在哪里?

侧边栏的动态渲染

根据问题1来回答 首先我们找到layout也就是src/views/layout/Layout.vue
因为在路由配置文件我们看见asyncRouterMap中好多组件的父组件都是LayoutLayout中我们就可以看到有个组件sidebar
ok继续找sidebar这个组件 src/views/layout/components/Sidebar/index.vue,发现这里就是渲染侧边栏的,然后找到渲染的变量是permission_routers 这个变量是存在vuex里面的,也就是说路由是存在vuex的 所以咋们去vuex里面找找看 src/store/modules/permission.js

路由的动态加载

src/store/modules/permission.js 这个文件里面有个actions

 GenerateRoutes({ commit }, data) {
return new Promise(resolve => {
const { roles } = data
let accessedRouters
if (roles.indexOf('admin') >= 0) {
accessedRouters = asyncRouterMap
} else {
accessedRouters = filterAsyncRouter(asyncRouterMap, roles)
}
commit('SET_ROUTERS', accessedRouters)
resolve()
})
}

发现就是这一段代码更改了permission_routers,具体逻辑咱们不看 简单解释来说就是

 如果用户的权限是管理员
把asyncRouterMap所有的路由页面都渲染出来,毕竟管理员嘛 你懂的权限嘛。
否则
我不是管理员但是也不是游客就是一小市民 那么我要去asyncRouterMap中找找我小市民能够访问哪些页面。

看完这段逻辑咋们就知道了这个路由是如何动态更改的了,等等,是不是忘了啥? 虽然我知道这个actions,但是。。。在哪调用的? 经过深思熟虑的着想,在花了0.1s后 就得出,既然是路由嘛 肯定是有个全局的地方要做判断的 所以得出结论就是 router.beforeEach, 一开始去找那个啥src/main.js,发现beforeEach被分离在src/permission.js 打开这个文件。一切疑问都解开了。

用户权限的获取

说真的。。这个文件好长。。都不想看了。。。。 下图的代码这么长 看个毛啊。。于是我简单翻译了下

router.beforeEach((to, from, next) => {
NProgress.start() // start progress bar
if (getToken()) { // 判断是否有token
if (to.path === '/login') {
next({ path: '/' })
NProgress.done() // router在hash模式下 手动改变hash 重定向回来 不会触发afterEach 暂时hack方案 ps:history模式下无问题,可删除该行!
} else {
if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
store.dispatch('GetUserInfo').then(res => { // 拉取user_info
const roles = res.data.role
store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可访问的路由表
router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
})
}).catch(() => {
store.dispatch('FedLogOut').then(() => {
Message.error('Verification failed, please login again')
next({ path: '/login' })
})
})
} else {
// 没有动态改变权限的需求可直接next() 删除下方权限判断 ↓
if (hasPermission(store.getters.roles, to.meta.role)) {
next()//
} else {
next({ path: '/401', query: { noGoBack: true }})
NProgress.done() // router在hash模式下 手动改变hash 重定向回来 不会触发afterEach 暂时hack方案 ps:history模式下无问题,可删除该行!
}
// 可删 ↑
}
}
} else {
if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单,直接进入
next()
} else {
next('/login') // 否则全部重定向到登录页
NProgress.done() // router在hash模式下 手动改变hash 重定向回来 不会触发afterEach 暂时hack方案 ps:history模式下无问题,可删除该行!
}
}
})

请说人话,翻译成人话的版本。。。

  每次更改页面路由
你有没有token啊?
有啊
好的,你的权限是默认的权限0么?
是的。。我就是一游客
系统获取我的信息..拿到权限值,动态加载路由(GenerateRoutes)...通行...
不是。。我是权限汪(admin)
等等..我看看作者有没有把你降级
没有
好了。。你还是权限汪 请进

滚吧,你已经不是权限汪了,作者已经把你写成战斗力只有5的渣渣了
没有
没有还敢闯这里?滚去关口(/login)

没错,就这么简单。整个权限验证流程就完整了。剩下的就是读读文档啊,看看如何使用组件之类的了。

参考 https://github.com/Relsoul

老板让我十分钟上手nx-admin的更多相关文章

  1. 【新手】【十分钟上手系列-一】快速开发vue插件

    2018.6.28 在这浮躁的前端娱乐圈,不会三两个新框架都觉得自己不是前端.哦,不是我说的.说到底.原生才是重中之重.加油. vue用了大半年多,一直在用ui库,插件等,没有自己的东西. 想想连个v ...

  2. Apache Shiro系列教程之二:十分钟上手Shiro

    在本教程中,我们会写一个简单的.仅仅输出一些内容命令行程序,从而对Shiro有一个大体的感觉. 一.准备工作 本教程需要Java1.5+,并且我们用Maven生成项目,当然Maven不是必须的,你也可 ...

  3. 十分钟上手-搭建vue开发环境(新手教程)

    想写一些关于vue的文章已经很久了,因为这个框架已经火了很久,在公司里用的框架都比较老旧,但怎么也得跟上前端发展变化的潮流,这不,开始使用vue开发项目了,一遍开发一边踩坑中,今天要记录的是五分钟搭建 ...

  4. Go学习笔记(二)十分钟上手

    加 Golang学习 QQ群共同学习进步成家立业工作 ^-^ 群号:96933959 变量&常量 变量 变量名由字母.数字.下划线组成,不能以数字开头. ... var ( A int //默 ...

  5. Go语言学习笔记(二)十分钟上手

    加 Golang学习 QQ群共同学习进步成家立业工作 ^-^ 群号:96933959 变量&常量 变量 变量名由字母.数字.下划线组成,不能以数字开头. ... var ( A int //默 ...

  6. PHP学习过程_Symfony_(3)_整理_十分钟学会Symfony

    这篇文章主要介绍了Symfony学习十分钟入门教程,详细介绍了Symfony的安装配置,项目初始化,建立Bundle,设计实体,添加约束,增删改查等基本操作技巧,需要的朋友可以参考下 (此文章已被多人 ...

  7. 号外号外:9月13号《Speed-BI云平台案例实操--十分钟做报表》开讲了

    引言:如何快速分析纷繁复杂的数据?如何快速做出老板满意的报表?如何快速将Speed-BI云平台运用到实际场景中?         本课程将通过各行各业案例背景,将Speed-BI云平台运用到实际场景中 ...

  8. (十分钟视频教程)nodejs基础实战教程3:react服务端渲染入门篇

    视频截图如下: (具体视频见文末) 前言: 这是小猫的第三篇node教程,本篇内容是由公众号粉丝票选得出的,相信大家对这篇教程是抱有较大希望的,这篇教程由小猫和一位多年的好朋友合作完成(笔名:谷雨,博 ...

  9. spring boot 实现密码连续输入错误5次,限制十分钟内不能进行登录

    我们要实现的就是,密码连续输入错误5次,就限制用户十分钟不能进行登录. 大致的流程图 数据库设计如下 DROP TABLE IF EXISTS `user`; CREATE TABLE `user` ...

随机推荐

  1. Mac查询电脑mac地址

    方法一: 按住键盘上的“Windows+R”,然后在弹出的运行框中输入“CMD”或依次点击 开始>所有程序>附件>命令提示符 在弹出的命令提示符窗口中输入“ipconfig /all ...

  2. 集训队8月9日(组合计数+容斥原理+Mobius函数)

    刷题数:4 今天看了组合计数+容斥原理+Mobius函数,算法竞赛进阶指南169~179页 组合计数 https://www.cnblogs.com/2462478392Lee/p/11328938. ...

  3. PWA 应用

    1. 使用例子,vue官网,在手机浏览器器打开时,保存在桌面那个应用.还有饿了么网站也是PWA应用.

  4. django manager

    django manager 在语句Book.objects.all()中,objects是一个特殊的属性,需要通过它查询数据库. 总之,模块manager是一个对象,Django模块通过它进行数据库 ...

  5. 老牌激活工具– Microsoft Toolkit 2.4.3 + 详细图文教程【转】

    老牌激活工具-- Microsoft Toolkit 2.4.3 + 详细图文教程 windowsToolkit是一个一键激活MS Office 2010的工具.原理就是利用KMS来激活,不是新的激活 ...

  6. JVM调优(二)——基于JVisualVM的可视化监控

    JVM调优(二)--基于JVisualVM的可视化监控 工具路径://java/jdk1.8xxx/bin/JVisuaVM.exe 监控本地的Tomcat 监控远程Tomcat 监控普通的JAVA进 ...

  7. 建站手册-浏览器信息:Mozilla Firefox 浏览器

    ylbtech-建站手册-浏览器信息:Mozilla Firefox 浏览器 1.返回顶部 1. http://www.w3school.com.cn/browsers/browsers_firefo ...

  8. jQuery-resize和scroll的性能优化

    ## 下面是进行测试和研究怎么实现的用的 Document 改变页面大小试试 Document 滚动滚动条试试

  9. NTP时钟调整策略

    一.        问题背景 天威视讯项目3月底发生了一次点播出现节目请求超时的情况,在查询故障的过程中,发现MAP服务器操作系统的时钟被向前调整了11秒,姑且不论是否是这个原因导致的故障,但每台服务 ...

  10. charles抓包看性能数据

    1.优化某个接口或加载速度(H5加载速度慢) 抓包看Overview ①看Duration,就是接口的加载时间 ②看Latency,就是延时一端传播到另一端所花费的时间:一般和网络有关:可以综合Dur ...