React项目配置6(前后端分离如何控制用户权限)

Posted 2021-04-30 前端人人

1、React项目配置1(如何管理项目公共js方法)---2018.01.11

2、React项目配置2(自己封装Ajax)---2018.01.12

3、React项目配置3(如何管理项目API接口)---2018.01.15

4、React项目配置4(如何在开发时跨域获取api请求)---2018.01.16

5、React项目配置5(引入MockJs,实现假接口开发)---2018.01.17

6、React项目配置6(前后端分离如何控制用户权限)---2018.01.18

7、React项目配置6(ES7的Async/Await的使用)---2018.01.19(新增)

开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2

其实这块内容不知道怎么讲！因为前端是不能控制用户权限的，即便你做了，也可以修改！这块主要是后端来做！

但是好多童鞋问，估计是因为没有想通！

传统的控制权限，都是经过后台过滤，然后生成html到前端的！

而现在的前端开发，在前后端分离情况下，如何控制权限？

也是通过后台来控制！

说白了，前端就是负责渲染用户界面！

我说下我们的做法,可能不是最好的！

就是在用户登录来的时候，后台会返回一个TOKEN，这是什么玩意，大家可以去百度下OAuth 2.0，这里不做过多介绍！

我们把TOKEN存在本地cookie中或者你存localstorage，sessionStorage都行！这几个具体区别，请另行百度！

然后所有的api接口请求都带上这个TOKEN，后台拿到TOKEN就知道用户身份，也就知道该用户有哪些权限！

用户在退出的时候，你删除本地的TOKEN！

一些具体的权限控制！

比如说用户没有登录，用户却点击用户中心，你只要在用户中心的跳转事件中，判断下有没有TOKEN，用的话就进行跳转，没有的话，跳转到登录页！

这里还有一种情况，就是有TOKEN，但是TOKEN不对，或者过期也需要跳转登录页。那么你就需要再判断下，当用TOKEN的时候，去校验下这个TOKEN，是否真实或者是否过期，如果都是真，则跳转进用户中心，否则跳转到登录页！

那么进入用户中心，这个用户属于某个企业，该企业有很多用户，这些用户进来都可以看到同一个List列表，而这些用户又有不同的权限，有人可以删除List里的Item，有人不行！

Item 后面会有个删除按钮，能删除的，显示这个删除按钮，不能删除的，当然不显示这个删除按钮，那么怎么显示这个按钮呢？

这些按钮的显示与否，当然也是后台来控制！

当用户进入用户中心，都会去请求http://xxx.com/api/newList?token=xxxxxxx,

后台拿到这个token，就知道用户身份，也知道了用户权限，会再返回数据里告诉你该List里item 是否有删除按钮，比如说返回的数据是：

没有删除权限的人收到的list 里 item是这样的：

{

title:'前端人人1'

del:0,

}

有删除权限的人收到的item是这样的：

{

title:'前端人人1'

del:1,

}

我们前端渲染的时候，就判断del，比如：

{del === 1 ? '删除' : null}

有人说，这个可以在前端篡改啊！

没事他改也行，删除的接口也会带上Token,后台还会再校验的！

最后，强调一下，项目上线最好开启HTTPS！

关于安全，我这里就不多讲了！大家有兴趣可以自行百度！

本文完 

感谢童鞋们支持!

如果你有什么问题,可以在下方留言给我们!