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()否则就返回登陆页面
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,886评论 18 139
  • Vue-router学习指南 日记:本文按照vue-router官网的知识结合例子进行分析和讲解,搭建工具(vue...
    sunny519111阅读 1,488评论 0 6
  • 推荐我的vue教程:VUE系列教程目录 前言 通过前面我写的VUE入门博客,相信已经大概了解VUE是何物,但是对于...
    侬姝沁儿阅读 2,991评论 4 19
  • 有个女士深深的喜欢了我将近二十个年头。而随着白云苍狗的变迁,这种喜欢被爱替换,刻在血液中。 有人说她爱我是...
    是荔枝的璃音阅读 499评论 0 1
  • 足球啊,我想对你说句话 足球啊,我想对你说句话,谢谢你这么多年的不离不弃,让我拥有了强建的身体。让我在快乐中度过每...
    德罗巴007_592阅读 1,558评论 5 17