参考资料：nx-admin项目地址首先，vue、vuex之类的基础的东西这里就不多说了。有兴趣的可以去官方文档了解一下。这里就按照流程大致说一下路由配置。首先，找到路由配置。路由配置放在src/router/index.js路由配置中，暴露了两个常量。一个是constantRouterMap，另一个是asyncRouterMap。nx-admin的权限验证是1左右，默认所有人都可以访问页面。无需许可。大家访问的页面定义为constantRouterMap2。需要登录或者权限的页面路由定义为asyncRouterMap，根据后台获取用户信息role（权限），不同的是动态加载asyncRouterMap中meta.role权限对应的页面。登录成功后要做什么。点击登录后，左侧边栏有一个导航列表。这里有两个问题？根据路由配置动态加载相应的权限路由，所以侧边栏里肯定有那么多路由写不死吧？单击登录后，这些登录过程如何进行？用户权限存在于何处？令牌在哪里？侧边栏动态渲染根据问题1回答，首先我们找到布局，也就是src/views/layout/Layout.vue，因为在路由配置文件中，我们可以看到很多组件的父组件在asyncRouterMap是Layout。在Layout中，我们可以看到有一个组件侧边栏。好，继续寻找侧边栏组件src/views/layout/components/Sidebar/index.vue，发现这里是侧边栏渲染的地方，然后发现渲染的变量是permission_routers。vuex中存在这个变量，也就是说路由存在vuex中，我们去vuex中寻找src/store/modules/permission.js。动态加载路由src/store/modules/permission.js这个文件有动作GenerateRoutes({commit},data){returnnewPromise(resolve=>{const{roles}=dataletaccessedRoutersif(roles.indexOf('admin')>=0){accessedRouters=asyncRouterMap}else{accessedRouters=filterAsyncRouter(asyncRouterMap,roles)}commit('SET_ROUTERS',accessedRouters)resolve()})}发现这段代码改变了pe??rmission_routers，具体逻辑我们如果不看简单的解释，如果用户的权限是管理员渲染asyncRouterMap的所有路由页面，毕竟管理员的权限你懂的。否则，我不是管理员但我不是游客或公民，所以我会去asyncRouterMap找出我的公民可以访问哪些页面。看完这个逻辑，我们就知道这个路由是如何动态变化的了。等等，你是不是忘记了什么？虽然我知道这个动作，但是。..它在哪里叫？经过深思熟虑，花了0.1s后，得出的结论是既然是路由，肯定有一个全局的地方去判断，所以得出的结论是router.beforeEach，先找那个src/main.js，发现在src/permission.js中把beforeEach分开打开这个文件。所有疑惑都解开了。说真的，获取用户权限。.这个文件很长。.我什至不想看它。...下图的代码好长，看看吧。.所以我简单翻译了router.beforeEach((to,from,next)=>{NProgress.start()//启动进度条if(getToken()){//判断是否有tokenif(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=>{//Pulluser_infoconstroles=res.data.rolestore.dispatch('GenerateRoutes',{roles}).then(()=>{//生成可访问的路由表router.addRoutes(store.getters.addRouters)//动态添加可访问的路由表next({...to,replace:true})//hack方法确保addRoutes完成，设置replace:true这样导航就不会留下历史记录})}).catch(()=>{store.dispatch('FedLogOut').then(()=>{Message.error('验证失败，请重新登录')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，重定向返回不会触发afterEachTemporaryhacksolutionps：在历史模式下没问题，删掉这行！}//可以删除↑}}}else{if(whiteList.indexOf(to.path)!==-1){//在没有登录的白名单中，直接进入next()}else{next('/login')//否则全部重定向到登录页面NProgress.done()//路由器在hash模式下手动更改hash，重定向回来不会触发afterEach临时hack解决方案ps：history模式没有问题，你可以删除这一行！}}})请说人类语言并将其翻译成成人语言版本。.每次更改页面路由时，是否都有令牌？对对对，你的权限是默认权限0吗？是的。.我是一名游客。系统获取我的信息..获取权限值，动态加载路由(GenerateRoutes)...pass...没有。.我是admin（管理员）等等。。让我看看作者有没有给你降级。不行。.你还有授权，请进来是滚出去，你已经没有授权了，作者把你写成战力只有5的渣了NoNo还敢来？去pass(/login)是的，就这么简单。整个权限验证过程就完成了。剩下的就是阅读文档，看看如何使用组件等。参考https://github.com/Relsoul
