20180308_vue-router前端权限掌握题目

vue-router前端权限掌握题目
条件纲领:
1.用户A和用户B有差别的权限。
页面分左边菜单部份和右边内容部份,右边内容可能有差别途径的差别内容
最简朴例子为点击左边用户治理
右边显现用户列表
点击某条内容概况
右边显现某一用户的细致内容
2.用户A能够接见途径权限以下:

a/list
a/detail/:id
a/list/:id 

用户B能够接见途径权限以下:

b/list
b/detail/:id
b/list/:id

3.一般用户上岸进去能够看到本身的菜单,
点击菜单右边内容部份发生变化,然后在右边操纵,变动页面url,左边菜单稳定,右边内容页发生变化

碰到题目以下:
用户B上岸进去点击菜单进入b/detail/:id然后保留为书签(即保留该途径)退出
然后用户A上岸点击保留的标签页,一般猎取左边菜单权限,左边菜单一般显现,然则右边却依据url显现了本身权限外的b/detail/:id的内容(暂不斟酌跟服务端交互题目,虽然说服务端能够再掉用接口时给出无权限返回,前端再依据返回举行逻辑处置惩罚,但即使如许前端页面显现照旧不一般)

处理方案:
在路由进入之前,依据路由的meta属性的某一字段比对一切的可接见权限(这个在登录时已猎取了,能够存在localstorage里),如果能找到则进去不然跳转到某个牢固页,如许就处理了权限题目

    原文作者:朱阳星
    原文地址: https://segmentfault.com/a/1190000013622017
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞