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

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

SSR

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

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

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

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

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

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

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

@jaylee4869 好的感谢😊

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

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

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

WASM ？

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

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

@AerithLoveMe #7

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

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

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

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

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

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

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

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



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

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

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

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