前后端分离如何控制用户权限(React项目配置)
前后端分离的权限控制的前后端责任划分:
在弄清前后端在权限控制中各自的职责是什么之前,需要理解前后端各自在系统中的职责。这个还是很好理解:
服务端:提供数据接口。
前端:路由控制、页面渲染。
在用户登录来的时候,服务器端会返回一个TOKEN,并不是一个字符串那么简单,而是用户信息(最好做到加密)!
把TOKEN存在本地cookie中或者你存localstorage(推荐),sessionStorage都行!
然后所有的api接口请求都带上这个TOKEN,后端拿到TOKEN就知道用户身份,也就知道该用户的权限以及验证信息!
用户在退出的时候,删除本地的TOKEN,若是做sso,那么需要服务器端删除TOKEN!
具体的权限控制实现方式:
比如说用户没有登录,用户却点击用户中心,你只要在用户中心的跳转事件中,判断下有没有TOKEN,说白了就是在后端验证有没有TOKEN,有的话就进行跳转,没有的话,跳转到登录页,这个需要返回前端一个状态码。
这里还有一种情况,就是有TOKEN,但是TOKEN不对,或者过期也需要跳转登录页。那么你就需要再判断下,当用TOKEN的时候,去校验下这个TOKEN,是否真实或者是否过期,如果都是真,则跳转进用户中心,否则跳转到登录页!
那么进入用户中心,这个用户属于某个企业,该企业有很多用户,这些用户进来都可以看到同一个List列表,而这些用户又有不同的权限,有人可以删除List里的Item,有人不行!
Item 后面会有个删除按钮,能删除的,显示这个删除按钮,不能删除的,当然不显示这个删除按钮,那么怎么显示这个按钮呢?
这些按钮的显示与否,当然也是后台来控制!
当用户进入用户中心,都会去请求http://www.xxx.com/article/tokenxxxxxxx,
【前后端分离如何控制用户权限(React项目配置)】后台拿到这个token,就知道用户身份,也收到用户权限,会再返回数据里告诉你权限中是否有删除按钮。这样就实现了权限控制。