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

Question

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

• vue
• vue router
• vuex
• node
• express

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

• 只有我对后台有请求的时候，我才知道用户到底有没有这个权限「因为前台的权限，就存在 localSorage 里面，用户可以更改」，如果请求发现没权限，还是前端 router 跳到没权限或者登录页，但是如果这个页面没有请求呢。

• 因为是一个管理系统，权限特别细，比如某些用户只有这几个目录可以看，其他用户只有那几个目录可以看，但我用的是前端路由，问题又来了。

  • 前端路由一般都是配置好的，我怎么让用户一进来就跳到他自己有权限的页面的第一页。
  • 如果用户直接输入 一个没有权限进入的地址 我该怎么拦截「须知我的拦截其实没有意义，因为页面都在他那里，他只需要改掉我的拦截代码就行」

---

这里 我现在的解决方案是

• 还是后台传给我 详细的权限，用于我铺设页面，如果这个没有权限，导航上也是没有显示的，但是这样还是可以被更改。

• 第二个 用户登录 就会跳他能看到页面的第一个。

  • 首先 路由上 是全部都注册好的
  • 请求之后拿到权限，然后根据权限 生成导航数组
  • 然后自动页面跳到导航数组的 第一个
  • 切换页面的时候，都要去根据导航数组判断他是否有这个页面权限。

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

Answer 1

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

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

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

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

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

Answer 2

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

Answer 3

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

可以参考下这个回答

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

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

Answer 9

首先，肯定只能是后端权限起作用
其次，对每个涉权操作，都要进行鉴权后才响应，这一步不能省，否则会乱套的。

后面有人提到查操作可以不需要鉴权，这个全面来说是错误的，如果是涉密环境，就是查操作肯定也要鉴权，有权的才能访问的。所以每个涉权操作每一次都需要鉴权。

前端权限相关字段仅仅是为了优化UI，并不具有实际的权限管理作用，只有这样才能保证权限系统是稳定的。

Answer 10

首先 权限功能是由后台实现的，我们的目标是如何在复杂权限系统的前端体现出权限的概念

我的做法是前端路由全部存数据库，每个前端路由下绑定该路由需要访问的api，通过前端的管理界面实现 前端和后端权限的绑定。用户登录时获取有权限的前端路由动态注册

由此实现了界面上大到路由，小到一个按钮的任何权限管控(按钮也存后端)，既无权限也不显示ui，比如某一个路由没权限，后端也不会返回该路由，导致前端没有这条路由

然后又通过路由表关联的api实现了每打开一个前端页面可以自动请求该页面下的api 自己同步后端的接口验证到前端，后端修改接口验证，前端自动更改等等一系列功能，手机打字太累不再赘述，感兴趣沟通我

Answer 11

我做的项目也是有这个问题, 因为我这里的权限控制非常细, 细到每一步操作都要判断是否可以进行, 于是我和后端这样约定.

查操作, 前端不进行鉴权, 后端根据用户的权限, 如果有数据则返回数据, 没有数据就返回空
增删改操作, 前端统一在组件内自动 fetch 相关资源的 action, 然后根据后端返回是否有权限, 来决定组件的行为

Answer 12

可以看看这个，前后端分离权限问题解决样板https://github.com/lenve/vhr

Answer 13

说到权限，我这两天正好在重构我们系统的权限模块。当然是在前N人的基础上重构。思想大概是这样的。我们现在老系统用的是angular框架。

实现原理：
可以在父级controller中去定义好你要显示的，亦或者你要控制的权限码。然后在子集控制集中调用循环出来。

保存的时候就是将这些权限码全部放入一个数组中，使用的时候是在父级控制器中写一个公共方法。检索后台返回的数据中是否有你想要检索的字符串。

第一次登陆系统的时候，再登录动作触发之后需要将所有的权限码放入localstorage中。

PS：我知道这种控制权限不是很安全，可是我们系统接口无法达到速度很快。所以就只能暂时这样处理。

Answer 14

前后端分离，不是完全分离？你没有自己的node服务器，再去转接后台请求，session在哪里做的，正常权限数据应该放在session里的。

Answer 15

楼主的问题，其实应该是有答案：所有权限控制都放在后端， 至于一个用户能看到什么目录资源，全部由后端接口处理返回数据。后端给什么，前端就显示什么。连v-if都不用写。数据也是一样，后端接口返回什么就处理什么。不用关心权限。至于用户拿到什么链接直接去访问，是要带session（会话） 或者token(令牌)。这两种信息也是后端维护的。现代前后端分离。就是前端负责表现与交互逻辑，后端负责数据与业务逻辑。权限明显是业务逻辑的范畴。

Answer 16

从后端拿到当前用户能访问的页面菜单配置，或跟权限相关的操作，可先进行查询等，
也有做一些示例：https://github.com/meibin08/ ，可以参考一下，