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

[bobiscool]

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

• vue
• vue router
• vuex
• node
• express

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

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

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

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

---

这里 我现在的解决方案是

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

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

[lifeintools]

后端做鉴权。

[sudoz]

必然是后端做啊

[ty89]

后端维护一个权限的表（可能是在内存里，也可能是在数据库里），所有的权限设置都由这张表来控制，后端通过 API 返回给前端详细的权限配置，前端解析权限列表绘制界面，你跟后端约定一个两边都方便处理的数据结构就行了

[bobiscool]

各位能不能 好好审题，权限是后台做，但是页面的权限后台怎么做？ 特别是前后端分离后，路由是前端控制的时候。

[Jealee]

后台传详细的权限，对应的 api 也会有权限控制啊，对于无权限的用户直接 401，前端再怎么改也获取不到数据啊。

[CDL]

vue 组件请用异步加载

[ctsed]

前端改就改了无所谓

[ty89]

@bobiscool
看把你能得

1，回答你的问题不是义务
2，楼上几个都已经说的很清楚了，你自己稍微动一下脑子
3，不做伸手党

[sm0king]

@ty89
哈哈，“看把你能得 ” 这句说的真好。
其实楼主只是把简单的问题想复杂了，很快就会反应过来了的。

[bobiscool]

@ty89 这 。。。好吧 好像是 注意审题 说的不对 ，我其实态度很端正的 😂

[Jealee]

例如 A 菜单会访问 a,b,c 三个接口,B 菜单会访问 c,d,f 三个接口。后端维护几张权限表。前端获取用户信息时就会获取有哪些菜单的权限。比如甲用户只能访问 A 菜单，即使通过前端修改，他能弄出 B 菜单出来，显示 B 菜单的页面，但是对于后端我会判断他有没有 B 菜单的权限，没有的话 d,f 接口就会报 401，c 接口报不报 401 就看你的需求了。大概是这样子的，不知道讲明白没...

[whypool]

做了 n 个 spa，给你一点意见：
1，登陆权限，一般来说这个是独立出来，不用 spa 做，就一个表单的事情，后面也容易做扩展，包括单点登录什么的；
2，登陆集成到 spa 里面，这个一般在请求加拦截，vuex 可以存 token，每次请求头带 token，后端校验 token 是否有效，如果修改了或者过期了，返回约定的字段标识，异步请求 axios 在返回 response 的时候优先拦截 token 校验，如果失效直接 vue-router 路由到登录页；
3，内部权限，子页面什么的，前端一般是打包好了文件，页面是全部的，但是有的页面需要权限控制是否能访问，这时候只能做 2 次校验，后端返回当前权限能访问的路由 or 页面，存 vuex，前端路由加 watch，每次切换跳转都要遍历一次；
4，接口权限，有的接口是不能提供给无权限的人使用的，比如抓包出来的；这时候后端做鉴权，返回约定的字段就行

[wu67]

这个随便搜搜都能找到思路吧，rbac+前后端分离之类的。然后具体实现自己鼓捣鼓捣咯。。。

[neoblackcap]

@bobiscool 上面几楼已经说得很明白了，权限后台做，后台的为准。前端做的就是相信 API 里面获得的权限，至于会不会被用户串改，那个是用户的事。你要做的就是保证这个操作是这个用户做的，难道你还能防止 root 用户的信息不被人为泄露？
如果你保证了前端的操作是这个用户做的，在正常的情况是不出问题的，那么剩下的都是后端的锅。研发服务端第一个准则就是不相信任何人，鉴权不通过就是失败，才不管请求是从哪里来。

[hantsy]

还以为是 5 年前的帖子浮起来。现在 SPA 不要太常见，这还有什么好讨论的。

手机 APP，SPA WEB 程序（不管是桌面还是网站）都是可以用 Oauth 2/JWT 认证。

[corningsun]

应该有后台管理系统吧？

1. 维护页面菜单信息，名称，上下级关系，路由等；
2. 维护 API 信息，API 的名称，路由；
3. 维护菜单和 API 的对应关系；
4. 维护角色信息，包括角色有哪些菜单权限；

-----------------
正常流：用户登陆后，根据角色返回菜单信息，并构造页面。
异常流：用户自己输入菜单 URL，但是 API 调用时，后台会进行 角色校验如果没有对应 API 权限，会返回异常。
-----------------
关于菜单和 API 对应关系，建议前后端一起约定，根据相同的前缀可以模糊匹配，大大降低工作量。

[freeminder]

前端防止不了用户篡改去看越权的页面，这事情是服务端做的，接口上让他请求不到越权数据就好了，一个空页面的泄露也没什么可怕的，除非你把敏感数据写成静态资源了？所以你要是觉得前端的权限控制不够安全，你多虑了，这不是一个前端能做的事情。如果你的问题在于“同样的权限控制逻辑前后端在冗余”这种问题，那么这个控制逻辑必须维护在后端，因为之前已经说过了前端安全控制不现实。所以你要做的事情是请求这个控制数据，然后在 SPA 中应用这个控制。现在的做法就够用了。防篡改就保持一个思路：你做某个防范的代价低于破坏者的代价，就去做。安防就是一个权衡，在各种代价之中的均衡态，不要试图达成绝对安全。

[LeeSeoung]

只要接口保证不被越权执行功能，前台就算被些懂行的绕过路由进去又会咋样。。反正他也只能在前台鼓捣，数据又不会记录到后台。

[jasperjia]

路由 - 界面 - 接口 三层权限

[jasperjia]

后端鉴权通过后返回前端，保存在全局的上下文中。在路由、界面、接口三部分加中间层判断是否具有权限。思路理清晰其实很简单。