为什么要做这个多角色登陆限制呢?因为最近做的后台系统登陆中涉及到多个用户登陆,想在前端做个路由的限制,防止权限低的用户在登陆的情况下(服务器已经验证登陆)用户手打uri登录到权限高的页面。
本此主要用到vue-router对vue的路由限制, 使用vue-router的导航钩子
const router = new VueRouter({});
router.beforeEach((to, from, next)=>{
//...
});
思路路由上带有登陆角色的标识
如:
- localhost:8080/admin/home
- localhost:8080/user/home
思路:
- 根据to.path和from.path的比较(取出登陆角色标识进行比较)如果前后一致则可以next()否则就返回登陆页面或者报错。
- 用户登陆和登陆后进行页面跳转时,向服务器请求获取当前登陆者的角色标识,然后和url上的用户标识对比,一致则next()否则就返回登陆页面