大致流程

参考资料:

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中很多组件的父组件都是Layout 在Layout中我们就可以看到有个组件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