老板让我十分钟上手开发vue-element | vue admin login
参考资料:vue-element官方介绍教程[1]首先这里就不说vue和vuex之类的了有兴趣的可以去官方文档了解。这里根据走向大概说说登录首先是登录页也就是/login那么我们找到对应的登录页面layout也就是src/views/login/index.vue找到这个页面后,不急着看逻辑,继续看路由配置,路由配置放在了src/router/index.js路由配置在路由配置里暴露了两个常量一个是constantRouterMap另外一个是asyncRouterMap这里先说说constantRouterMap。vue-element的权限验证大概是默认大家都能访问的页面,不需要登录啊权限啊啥都不需要游客访问的页面抽离定义为con...
参考资料:
vue-element官方介绍教程[1]首先这里就不说vue和vuex之类的了 有兴趣的可以去官方文档了解。这里根据走向大概说说
登录首先是登录页也就是/login 那么我们找到对应的登录页面layout也就是 src/views/login/index.vue 找到这个页面后,不急着看逻辑,继续看路由配置,路由配置放在了src/router/index.js
路由配置在路由配置里暴露了两个常量 一个是 constantRouterMap 另外一个是 asyncRouterMap 这里先说说constantRouterMap。 vue-element的权限验证大概是
默认大家都能访问的页面,不需要登录啊权限啊 啥都不需要 游客访问的页面抽离定义为 constantRouterMap 需要登录或者需要权限的页面路由抽离为 asyncRouterMap根据后台获取到用户role的不同来动态加载asyncRouterMap中meta.role的权限对应的页面
点击登录后做的事情还是回到刚刚的login页面,点击登录以后就直接进入dashboard页面了, 左侧的侧边栏也有导航列表了。 这里引出两个疑问
根据路由配置说的 动态加载对应的权限路由 那么侧边栏那么多路由 肯定不能写死吧? 我点击登录后 那些登录流程怎么走的?用户权限存在哪里?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里面找找看 src/store/modules/permission.js。
路由的动态加载src/store/modules/permission.js 这个...