SPA如何做权限路由?如何保证页面的不可访问性和安全性?

192 阅读3分钟

这里抛砖引玉提出问题,看大家平时做权限路由的方案是什么?

1.路由注册

大多数人在做权限路由的时候,估计是采取全部注册的方式,然后再通过mate里面注入auth等自定义属性进行权限判断的。但是这种方式会导致用户可以通过代理等方式,修改请求响应中的权限,从而绕过判断,进入不可访问的路由。所以路由注册的方式,最好还是采用动态注册路由的方式,先注册公共路由,再通过权限判断,动态注册路由。


2.怎么实现权限和路由绑定?

对于一个简单系统,可以通过对应角色绑定对应的路由的方式,进行路由绑定,但是对于比较复杂的系统,角色是未知的,也就是将来可以创建新的角色,配置不同的权限。那么就不能通过角色和路由绑定的方式,而是通过权限与路由绑定的方式,也就是你能够进入什么路由,是由管理员给你配置好的,可以动态添加。


3.后端数据的不可信

一般来说,我们通过请求,后端返回什么就是什么,这就是整个过程。但实际上后端返回的数据是可以被修改的,我们可以通过fiddler,whistle等代理工具,把这个数据进行修改。比如我当前的用户权限是user,我就可以通过fiddler,把user改成vip。此时网站前端拿到这个roles进行判断时,我们就可以绕过拦截,进入不可访问的页面。

虽然进入页面后访问接口还是没有权限,但是这个问题也是值得我们去解决的。


4.前端怎么接收路由绑定表?以及动态添加路由?

1.路由映射表

让我们来看一下若依-admin是怎么做的? vue.ruoyi.vip/index

image.png

登录后,我们可以看到若依是通过请求后端路由接口,通过路由映射表进行动态路由生成。这种方式比较简单,存在着一定的不安全性:一方面是我们这些前端开发者可以通过这个接口拿到这个网站有哪些路由,另一方面正如上面第三点所说的,假设我知道了某个vip路由,我是不是可以通过fiddler去修改这个请求的参数,让我进入这个vip页面?

2.角色绑定和权限code码

vben-admin是怎么做的呢?www.vben.pro/

文档也有说明:doc.vben.pro/guide/in-de…

image.png

vben是通过直接将角色写死的方式,与code码结合进行权限控制的,一方面是不够灵活,另一方面是无法解决安全性的问题。

image.png


5.路由表加密与http-only?

在传输的时候,是不是可以通过加密的方式,先将路由表加密,再到前端的时候,进行解密,以防止路由表被篡改?以及是不是可以把角色放到cookie里面,采用http-only的方式,防止被篡改呢?


6.终极方案——SSR

SPA存在的问题是,页面渲染已经是在浏览器端了,只不过是根据js判断要不要渲染而已。

SSR就很好的解决了这个问题,直接在服务端上判断权限,再决定要不要返回对应的html。


不过放弃SPA肯定是不可能的。从开发来说,SPA已经是快速开发的标准选择,那么大家在做权限路由的时候,是怎么做的?如何保证页面的不可访问性和安全性?