主流的实现方式：
前端控制不用后端帮助，路由表维护在前端逻辑相对比较简单，比较容易上手
后端控制相对更安全一点，路由表维护在数据库
先了解一下路由分类
1）静态路由：
常规模式下,我们的路由都是静态的.
准备好路由表信息，准备好所有的显示路由的 <router-view></router-view> 即可.
2）动态路由
动态路由只要是依仗于vue-router实例router提供的addRoutes函数,可以让我们在[路由表中]|(路由配置中),动态添加路由对象的能力，从而达到动态路由的目的.
1）优点: 当你的路由表信息由于是动态导入的,所以,对于那些没有配置的到路由信息里的组件,即使你知道路由链接,也无法访问.可以很好的做好的权限管理.
方法
a、将一些公共路由,写入到./router/index.js中.(公共权限)
b、从后台获取用户角色(或者动态路由信息),将这些动态路由数据,通过router.addRoute注册到路由表中.
c、还是要将所有的<router-view></router-view>组件和结构准备好.
注意:
由于你路由的动态加载的.
所以相应的你的路由点击链接也应该是动态加载的.
模板上依赖于你的动态路由来循环v-for出点击链接.
所以,你需要使用一个响应式的对象来存储动态路由链接信息列表.
两种方式去添加动态路由,一种是在登录后查询路由表保存到vuex或者localStore下，然后通过前置守卫来动态的添加路由,另一种就是登陆之后使用$router.addRoute直接添加路由，后者并不推荐，因为再刷新页面的时候会出现无法找到页面的情况
这里也包含从哪个地方注册进动态路由信息以及路由信息缓存的问题.
在这里使用 vuex 管理动态路由
好处一: 可以做到动态路由缓存.
好处二: 数据是响应式的,当动态路由发生改变时,模板会自动 render 更新.
方法一 、后端控制路由
后端控制大致思路：
路由配置放在数据库表里，用户登录成功后，根据角色权限，把有权限的菜单传给前端，前端格式化成页面路由识别的结构，再渲染到页面菜单上；
用户登录以后，后端根据该用户的角色，直接生成可访问的路由数据，注意这个地方是数据
前端根据后端返回的路由数据，转成自己需要的路由结构
实现步骤：
前置工作：在router文件夹下面的router.js中配置项目路由文件。
该文件中只放一些静态的路由，login、404之类
2）登录后通过接口拿到后端返回的数据
异步请求路由的数据可以方法登陆成功以后的方法内部、如下图
也可以放到Vuex的store下面的actions里面，如下图
返回的tlistTmp是一个对象的格式
3） 将数据存到Vuex的state的menus中，以便登陆成功进到home页面用v-for渲染菜单路由
4）用方法getRoutersByAuth将tlistTmp数据转成可以供addRouters()方法使用的结构
5）this.$router.addRoutes(routes: Array)
动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。
2、动态组件路由方法封装
1）在views文件夹下面新建一个index.js文件
2）引入组件并构造组件对象（用于后面拿到数据重构路由）
3）方法书写，目的就是配置动态路由，以便菜单按钮渲染出来以后可以通过push（）方法跳转
-
3.菜单渲染以及路由跳转
跳转后的页面用router-view显示跳转子页面，
在子页面中继续展示二级菜单（同理）
方法二 前端控制路由
思路：在路由配置里，通过meta属性，扩展权限相关的字段，在路由守卫里通过判断这个权限标识，实现路由的动态增加，及页面跳转；如：我们增加一个role字段来控制角色
具体方案：
1、根据登录用户的账号，返回前端用户的角色
2、前端根据用户的角色，跟路由表的meta.role进行匹配
3、将匹配到的路由形成可访问路由
1、在router.js文件（把静态路由和动态路由分别写在router.js）
2、store/modules/permission.js(在vuex维护一个module模块permission，通过配角色来控制菜单显不显示)
3、src/main.js新建一个路由守卫函数
这里面的代码主要是控制路由跳转之前，先查一下有哪些可访问的路由，登录以后跳转的逻辑可以在这个地方写
网友评论