vue多角色登陆系统路由限制的思路整理

为什么要做这个多角色登陆限制呢？因为最近做的后台系统登陆中涉及到多个用户登陆，想在前端做个路由的限制，防止权限低的用户在登陆的情况下（服务器已经验证登陆）用户手打uri登录到权限高的页面。

本此主要用到vue-router对vue的路由限制, 使用vue-router的导航钩子

const router = new VueRouter({});

router.beforeEach((to, from, next)=>{
    //...
});

思路路由上带有登陆角色的标识
如：

• localhost:8080/admin/home
• localhost:8080/user/home

思路：

1. 根据to.path和from.path的比较（取出登陆角色标识进行比较）如果前后一致则可以next()否则就返回登陆页面或者报错。
2. 用户登陆和登陆后进行页面跳转时，向服务器请求获取当前登陆者的角色标识，然后和url上的用户标识对比，一致则next()否则就返回登陆页面