已经做前后端分离快一年了技术栈趋向成熟 vue vue router vuex node express 做出来的是单页面应用，但是在权限上一直都有问题。现在我做权限是后台有一套，前端又有重复的一套，麻烦就在这里，只有我对后台有请求的时候，我才知道用户到底有没有这个权限「因为前台的权限，就存在 localSorage 里面，用户可以更改」，如果请求发现没权限，还是前端 router 跳到没权限或者登录页，但是如果这个页面没有请求呢。因为是一个管理系统，权限特别细，比如某些用户只有这几个目录可以看，其他用户只有那几个目录可以看，但我用的是前端路由，问题又来了。前端路由一般都是配置好的，我怎么让用户一进来就跳到他自己有权限的页面的第一页。如果用户直接输入一个没有权限进入的地址我该怎么拦截「须知我的拦截其实没有意义，因为页面都在他那里，他只需要改掉我的拦截代码就行」这里我现在的解决方案是还是后台传给我详细的权限，用于我铺设页面，如果这个没有权限，导航上也是没有显示的，但是这样还是可以被更改。第二个用户登录就会跳他能看到页面的第一个。首先路由上是全部都注册好的请求之后拿到权限，然后根据权限生成导航数组然后自动页面跳到导航数组的第一个切换页面的时候，都要去根据导航数组判断他是否有这个页面权限。但是我觉得自己的办法太笨拙，而且还是会被篡改，所以求各位解答疑惑，谢谢了。

控制全部交给后台处理。第一次登录的时候，使用用户信息生成 token 返回给客户端。 token 的安全性由后台处理，前端拿到的数据都认为是正确的，不对权限做控制。前端每次请求后台接口，都将 token 带入。由后台验证 token 的正确性，并且返回相应的结果。用标准的 restful api 就可以了。

权限由后端控制，前端只需要根据后端的返回结果判断是否有权限，或者是否有数据来进行友好的呈现可以参考下这个回答

前端不建议拥有权限控制，因为是不可靠的。。

权限由后端控制才是安全的前端只能做一些辅助判断看你的问题的我建议你们后台权限分两套：页面权限和数据权限进入一个页面或路由首先请求判断是否有页面的权限，有了页面的权限再请求数据，后台会更具token来判断返回相应的结果没有权限统一根据401中的错误码来做对应的展示这样做就可以很好的应对当用户手动修改本地数据或url访问到他不应该访问的页面了

vue路由有meta字段，可以用来存储可访问此路由的角色，但是这样的话，你的菜单需要根据路由动态生成而不是写死在页面上。

同意 @小翼做法是对的，你说的手动修改了有什么关系，就算用户能通过一些方式进入到本来进入不了的页面，当在那个页面想要获取到一些数据或者一些操作还是要通过这个token值，而这个token值用户是破解不了的，他只是单纯的进入了一个空页面而已页面

完整的前端权限控制可以参考这个项目： https://github.com/tower1229/...

首先，肯定只能是后端权限起作用其次，对每个涉权操作，都要进行鉴权后才响应，这一步不能省，否则会乱套的。后面有人提到查操作可以不需要鉴权，这个全面来说是错误的，如果是涉密环境，就是查操作肯定也要鉴权，有权的才能访问的。所以每个涉权操作每一次都需要鉴权。前端权限相关字段仅仅是为了优化UI，并不具有实际的权限管理作用，只有这样才能保证权限系统是稳定的。

首先权限功能是由后台实现的，我们的目标是如何在复杂权限系统的前端体现出权限的概念我的做法是前端路由全部存数据库，每个前端路由下绑定该路由需要访问的api，通过前端的管理界面实现前端和后端权限的绑定。用户登录时获取有权限的前端路由动态注册由此实现了界面上大到路由，小到一个按钮的任何权限管控(按钮也存后端)，既无权限也不显示ui，比如某一个路由没权限，后端也不会返回该路由，导致前端没有这条路由然后又通过路由表关联的api实现了每打开一个前端页面可以自动请求该页面下的api 自己同步后端的接口验证到前端，后端修改接口验证，前端自动更改等等一系列功能，手机打字太累不再赘述，感兴趣沟通我

我做的项目也是有这个问题, 因为我这里的权限控制非常细, 细到每一步操作都要判断是否可以进行, 于是我和后端这样约定. 查操作, 前端不进行鉴权, 后端根据用户的权限, 如果有数据则返回数据, 没有数据就返回空增删改操作, 前端统一在组件内自动 fetch 相关资源的 action, 然后根据后端返回是否有权限, 来决定组件的行为

前后端分离项目，你们是怎么控制权限的？

karlvicent

69596987

发布于
2017-12-22

已经做前后端分离快一年了
技术栈趋向成熟

vue
vue router
vuex
node
express

做出来的是单页面应用，但是在权限上一直都有问题。
现在我做权限是后台有一套，前端又有重复的一套，麻烦就在这里，

只有我对后台有请求的时候，我才知道用户到底有没有这个权限「因为前台的权限，就存在 localSorage 里面，用户可以更改」，如果请求发现没权限，还是前端 router 跳到没权限或者登录页，但是如果这个页面没有请求呢。
因为是一个管理系统，权限特别细，比如某些用户只有这几个目录可以看，其他用户只有那几个目录可以看，但我用的是前端路由，问题又来了。
- 前端路由一般都是配置好的，我怎么让用户一进来就跳到他自己有权限的页面的第一页。
- 如果用户直接输入一个没有权限进入的地址我该怎么拦截「须知我的拦截其实没有意义，因为页面都在他那里，他只需要改掉我的拦截代码就行」

这里我现在的解决方案是

还是后台传给我详细的权限，用于我铺设页面，如果这个没有权限，导航上也是没有显示的，但是这样还是可以被更改。
第二个用户登录就会跳他能看到页面的第一个。
- 首先路由上是全部都注册好的
- 请求之后拿到权限，然后根据权限生成导航数组
- 然后自动页面跳到导航数组的第一个
- 切换页面的时候，都要去根据导航数组判断他是否有这个页面权限。

但是我觉得自己的办法太笨拙，而且还是会被篡改，所以求各位解答疑惑，谢谢了。

javascript vue.js

html5 前后端分离

阅读 28.8k

16 个回答

得票最新

agui1989

4.6k15152196

发布于
2017-12-22

✓ 已被采纳

我觉得楼主的问题应该是不存在的。
后端做了权限控制，无权看到的内容就不会返回了，即使你请求了这个接口。

前端也控制了权限，无权访问的页面，导航中就不会显示了，如果用户自己在前端修改了前端的数据，或者跳过你给的导航，直接通过url访问对应的页面，也应该不会有什么大问题，因为即使他能在前端访问到那个页面，但每个页面都有对应的内容（数据），显示内容的时候是需要请求后端的，后端没有权限，打开页面也只能是空白。

你只要后端做好了权限控制，前端无论怎么改也应该是不能获取到自己没有权限的内容的。

从数据安全的角度来说，前端可以完全不使用权限控制；如果你那里做不到这点的话，那么，你后端的权限控制肯定是有问题的。

前端的权限控制只是为了给用户更好的体检；并不是真的拿来控制权限的。