20180308_vue-router前端权限控制问题

阿罗发布于2019-08-22 15:13 / 3389人阅读

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里)，如果能找到则进去否则跳转到某个固定页，这样就解决了权限问题

云服务器 GPU云服务器权限控制角色权限控制 php控制权限 rbac权限控制

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93272.html

vue权限管理系统

摘要：权限系统后台管理系统一般都会有权限模块，用来控制用户能访问哪些页面和哪些数据接口。大多数管理系统的页面都长这样。表为角色权限关联表，一个角色拥有哪些权限是通过这张表查出来的。这样就是一个账号角色权限的关系。 vue权限系统后台管理系统一般都会有权限模块，用来控制用户能访问哪些页面和哪些数据接口。大多数管理系统的页面都长这样。 showImg(https://segmentfault...

bovenson 2019-08-23 14:46 评论0 收藏0
手摸手，带你用vue撸后台系列二(登录权限篇)

摘要：我们将登录按钮上绑上事件，点击登录之后向服务端提交账号和密码进行验证。所以前端和后端权限的划分是不太一致。侧边栏最后一个涉及到权限的地方就是侧边栏，不过在前完整项目地址：vue-element-admin 系列文章：手摸手，带你用vue撸后台系列一（基础篇）手摸手，带你用vue撸后台系列二(登录权限篇) 手摸手，带你用vue撸后台系列三 (实战篇) 手摸手，带你用vu...

不知名网友 2019-08-20 16:45 评论0 收藏0
VUE知识点集锦

摘要：载入前后在阶段，实例的和都初始化了，但还是挂载之前为虚拟的节点，还未替换。类似于，不同在于提交的是，而不是直接变更状态可以包含任意异步操作。 vue基础 1、 router 路由与 a 标签的区别：https://www.jianshu.com/p/34b...2、 VUE双向绑定的原理：答：VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个...

Tecode 2019-08-23 16:02 评论0 收藏0
VUE知识点集锦

摘要：载入前后在阶段，实例的和都初始化了，但还是挂载之前为虚拟的节点，还未替换。类似于，不同在于提交的是，而不是直接变更状态可以包含任意异步操作。 vue基础 1、 router 路由与 a 标签的区别：https://www.jianshu.com/p/34b...2、 VUE双向绑定的原理：答：VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个...

APICloud 2019-08-02 14:34 评论0 收藏0
前端真的能做到彻底权限控制吗？

摘要：有一天突然想到一个问题，端的权限控制真的能控制权限吗仅仅靠前端，能不能做到真正的权限控制如果需要后台配合，应该如何配合可能这是一个老生常谈的问题，但还是想整理下，有误的地方望大家指出。有一天突然想到一个问题，web端的权限控制：1.真的能控制权限吗？2.仅仅靠前端，能不能做到真正的权限控制？3.如果需要后台配合，应该如何配合？可能这是一个老生常谈的问题，但还是想整理下，有误的地方望大...

luck 2019-08-21 18:35 评论0 收藏0