React项目配置6

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,比如:

有人说,这个可以在前端篡改啊!

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

最后,强调一下,项目上线最好开启HTTPS!

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

本文完

禁止擅自转载,如需转载请在公众号中留言联系我们!

感谢童鞋们支持!

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

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180118G03KTJ00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

同媒体快讯

扫码关注腾讯云开发者

领取腾讯云代金券