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

[bobiscool]

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

• vue
• vue router
• vuex
• node
• express

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

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

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

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

---

这里 我现在的解决方案是

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

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

[skyadmin]

我觉得 18 楼说得对，你只要保证正常用户体验正常就行，没必要考虑会绕过路由进去的人，那波人就放他们在前端倒腾呗。

[zachguo]

权限（ role, permission ）放在后端返回的 JWT token 里前端就能提取到了，前端再写一个 access control 的 HOC （我们用的 react ）。

[zachguo]

可以把用户权限管理完全独立成一个服务，前后端都需要验证 token，这样前后端重写、拆分都比较方便。

[des]

你要觉得用户手工可以绕过的话，你可以路由部分后台生成完了传给你，权限敏感部分动态加载

[xsown]

所有涉及到安全的都必须服务端鉴权，在 API 接口上做

[RogerHzb]

做一个每个用户都能看的页面，所有人进来都跳这个页，轻松加愉快啊

[duan602728596]

我做的项目都没有后台配合你，只能是前端自己控制模块是否渲染，后端验证什么的都是不存在的

[110male]

统一调后端的接口。

[klren0312]

后台把权限菜单发给前台 ，前台渲染菜单，然后请求的时候再判断接口权限

[bramblex]

用户登录的时候顺便加载权限信息, 然后根据权限组配置一下菜单或者表单就好啊, 这不是基本操作嘛?

[ooTwToo]

Component beforeCreate 的时候检查权限？

[forzalianjunting]

建议还是用 vue-router 的 addRoutes 进行动态添加路由，最保险的方式

[amibug]

前端通常会设计到大量的权限控制问题，按照细粒度归归类大致可以分类以下三类
页面权限、模块权限-页面区块（组件）是否显示、元件权限-组件内元素是否显示
对于传统的多页应用，页面权限控制不需要前端关心，后端路由做一层控制。在 SPA 架构的前端应用中，我们的思路是将所有的前端路由配置在后端，对于不同角色的用户，后端把路由列表吐给前端做路由注册。

推荐看一下“前端权限控制方案” https://segmentfault.com/a/1190000011930560?_ea=3042426

[AJian]

1. 后台接口加一层 api gateway 做权限控制，防止越权调用
2. 请求后台接口获取当前登录用户所有的 [可用菜单（路由）] 及 [权限信息（权限 key ）]
3. 根据 [可用菜单] 动态生成 router
4. 页面子控件，如按钮（对应权限 key ）通过 v-if 实现显示与隐藏， 如
<button @click="action" v-if="hasPermission('user.create')">新增用户</Button>
hasPermission 做成一个 mixin 混入所有组件

[zhx1991]

前端组件加载拉权限, 可以把没权限的模块都给不展示了

后端拉各种数据和接口同样要拉权限

[memorycancel]

不推翻重写留着过年？？？

[yingfengi]

前后端双验证

[lc4t]

RESTfulAPI 鉴权啊.. 不过有点时候出现一个问题，就是前端打包之后暴露了管理员用到的接口.

后端 Nginx 上也可以设置一些白名单保证某些后台只允许 IP 访问..

[PanJiaChen]

我一直觉得前端和后端两个做权限的意义和目的是不同的。
之前特意写过一篇文章，推荐可以起看看
https://segmentfault.com/a/1190000009506097

[abcbuzhiming]

权限验证的目的是防止不怀好意的用户对系统进行渗透，修改不该它修改的数据，而前端的验证本质是做用户引导，代码都在别人前端那里，别人硬要通过修改达到绕过你的目的，你是防不住的，前端的验证仅仅是保证正常操作下用户看不到不该它看见的页面就行了，非正常用户跳过了你的限制，进入到不该进入的页面，这个页面还不是要从后端拉数据，后端的权限验证仍然能拦住它的。