[小疑惑] 前端是否能控制页面访问权限

[AerithLoveMe]

我想问问前端是否能控制页面访问权限。Jquery 可以实现吗？我试了一下发现直接禁用 JS 就可以跳过。

还是必须得和后端联调，使用 Vue ？单纯使用 Js 做不了权限控制么？

[jaylee4869]

前端是否能控制页面访问权限？能，但是不安全。
Jquery 可以实现吗？ 能，但是不安全。
我试了一下发现直接禁用 JS 就可以跳过？ 对啊，所以不安全。
还是必须得和后端联调，使用 Vue ？ 和 Vue 没有任何关系，只和后端有关系。
单纯使用 Js 做不了权限控制么？ 可以，不过的你的 JS 必须运行在服务端。

[toma77]

SSR

[w88975]

你换个思路嘛
你的思路: 所有页面都默认能访问, 如果用 JS 判断权限,没有权限就不能访问,禁用 JS 就失效了
那为什么不改为,本来所有人都没权限访问,得 JS 判断有权限,才能授权访问呢

[hahastudio]

@w88975 那就直接分析 JS 不就好了，前端防不住的

[kop1989]

与页面技术无关，web 前端的特点就是浏览器执行源代码，即无编译。
所以所有的前端封锁与控制都是“最大限度的增加破译的工作量来使得破译的性价比太低”来实现。

所以页面上的权限控制都是防君子不防小人的，即只是单纯的提醒你你没有这个按钮的权限，点了也没用。所以我给你隐藏了。

真正的权限控制都是服务器端接口的控制。

[AerithLoveMe]

@w88975 可是如何才能做到无权限访问呢。我能想到的只有隐藏，可这个也没用。

[AerithLoveMe]

@kop1989 我原本是想无权限就不给看页面。不渲染，这么说的话，单纯页面不能做到对吧？该渲染还是得渲染，只不过没有数据？

[AerithLoveMe]

@jaylee4869 好的感谢😊

[yaphets666]

在我的认知范围内是可以的(当然我很菜).以我熟悉的 vue 举例子,在 index.html 中写一个 noscript 标签.如果浏览器禁用了 javascript.那就会显示 noscript 标签中的内容.这时候 js 已经禁用.单页面应用无法进行路由跳转.手动输入 url 也没用.
当 js 未被禁用时.那么可以通过 vue-router 的动态路由功能限制路由. 既登录后调一个接口获取用户的理由数据.通过 addRoutes 方法添加进去.再加上路由守卫在跳转前判断权限.就可以自由控制用户的页面访问的权限. 这是绝大数单页面应用的做法

[cmdOptionKana]

@AerithLoveMe 纯前端也能做到，但使用场景有限。

比如，前端可以加密数据，必须知道正确密码的人才能解密。但这种方法的缺点是，你必须通过别的方式把密码告诉用户，并且用户必须是一个可靠的人（一个不会泄露密码的人）。

[agdhole]

WASM ？

业务需求的话，直接可以从接口处拦截，后端不返回数据就行了，前端用户能不能 hack 进页面都没用。

[rodrick]

不可以也不应该，就像最常见的购物支付界面，你可以看任何东西，但是你点击去支付的时候，点击前你必须调接口判断登录状态让他登录，差不多就是这么个设计吧

[kop1989]

@AerithLoveMe #7

是这样。所以如果需要控制的页面真的很重要（完全不能暴露），可以通过服务器端鉴权后返回 html 与 js 的方式来解决。

[yaphets666]

我很好奇你是怎么禁用 JS 跳过的?
难道你们是后端渲染的页面?
如果是后端渲染的那路由控制跟前端没关系啊.前端当然是无论如何都控制不了的.
如果你的 SPA 应用.前端是能完全的控制的.而且没有安全隐患.

[imn1]

这里前端只是说 web 吧？ APP/编译过的客户端 GUI 也是前端啊，这些可以控制
应该说这个前端给了用户什么权限，浏览器是用户控制数据权限很大的客户端，其他的就不一定了

[AerithLoveMe]

@yaphets666 就是单前端界面，我原本想试试如果只用 js 能不能做到控制权限

[bnm965321]

当 js 未被禁用时.那么可以通过 vue-router 的动态路由功能限制路由. 既登录后调一个接口获取用户的理由数据.通过 addRoutes 方法添加进去.再加上路由守卫在跳转前判断权限.就可以自由控制用户的页面访问的权限. 这是绝大数单页面应用的做法

@yaphets666 这部分直接在前端修改代码，修改 localstorage 是不是可以跳过？

[yaphets666]

@bnm965321 有风险的数据不存储在 webStorage 中的.尤其是 localStorage 中. 请求回来的路由数据.都在程序内部的存储空间中.也就是 Chrome 的内存中.这个外界是接触不到的. 而且路由数据没有存储在 webStorage 的必要.webStorage 中的数据一般是作为跨标签通信.防止页面某些数据刷新后丢失.等等 路由数据没有这个需求.

[bnm965321]

@yaphets666 你说的办法必须每个页面都先获取路由数据，然后再做其它的。而且安装这个逻辑不能并发 requests，需要安装 路由 response 的结果再做下一步。



js 源代码是可以直接在浏览器修改的，直接跳过检查可不可以。

如果上面的方法麻烦，只要后端接口没有做检查，可以直接访问接口。

[yaphets666]

@bnm965321 不用每个页面都请求啊 别的框架我不懂 在 vue 中,我的路由数据在你访问页面 或者登陆后就已经注入到 router 当中了. router 会自动识别你访问的 url 在不在路由列表中.如果不在话就会 404 了. 如果刷新页面的话.vue 有个 beforEach 这个东西.在进入每一个路由之前执行一些代码.我只要在这里检测.router 是否已经 addRoutes 就行了.没有的话那就发送一次请求.而不是次次发送请求.

js 源码可以直接在浏览器修改.这个我不知道你是什么意思.前端程序文件虽然运行在用户浏览器.用户可以查看(一堆乱码,已经压缩混淆过的).但是用户是无法编辑的啊.你可以试着编辑下这个 v2 的 JS 代码.你看能编辑么?

[bnm965321]

@yaphets666 如果数据存在内存里面。

我作为一个已经登陆过的用户，直接打开一个网站的详情页面：xxx.com/secrets/1

是不是又要重新拿一遍路由数据？

[bnm965321]

https://stackoverflow.com/questions/6657229/how-can-i-edit-javascript-in-my-browser-like-i-can-use-firebug-to-edit-css-html

用 fiddler 可以修改数据，或者我伪造一个本地的 DNS，伪造路由接口的数据

[yaphets666]

@bnm965321 在控制台执行代码 是没办法影响到**不依赖外部数据**的程序. 我的理解是这样的.我的路由数据在 Vue 实例中.Vue 实例也就是一系列的 JS 代码.代码运行在浏览器的引擎当中. 在控制台中是没办法改变运行着的 JS 代码的.比如说一个 Vue 应用.Vue 实例挂载在 window 上.你在控制台输入 delete window.Vue. 这样 window.Vue 就变成 undefined 但是这并不影响前端程序的运行 这不是一回事

[bnm965321]

比如你的 route API 是 xxx.com/api/route

我在本地拦截这个请求，修改 response 。

https://blog.csdn.net/hqzxsc2006/article/details/47041979

@yaphets666

[yaphets666]

@bnm965321 spa 应用的路由都是#/XXXX 这个路由是前端路由 不涉及到页面的跳转 xxx.com/secrets/1 这个样子是去访问服务器了 这跟 vue react 做的 spa 不是一回事了 跟前端没关系了 当然前端控制不了 我是在讲 spa 应用

你意思 fiddler 可以拦截 HTTPS 的某个特定的请求返回假数据?如果这样的话确实可以. 不过应该做不到吧 HTTP 的兴许可以,不然 HTTPS 还有什么用呢

[bnm965321]

@yaphets666 本地 https，可以直接使用 fiddler 的证书的，很多 mobile app 的数据爬虫都是这么做的

[lllllliu]

WASM ..

[yaphets666]

@bnm965321 这样确实可以，不过问题不大，也只是看到了页面 不影响数据安全