文章图片
文章图片
本教程总共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，比如：
{del === 1 ? '删除' : null}
有人说，这个可以在前端篡改啊！
没事他改也行，删除的接口也会带上Token,后台还会再校验的！
最后，强调一下，项目上线最好开启HTTPS！
关于安全，我这里就不多讲了！大家有兴趣可以自行百度！
本文完 
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
禁止擅自转载,如需转载请在公众号中留言联系我们!
感谢童鞋们支持!
如果你有什么问题,可以在下方留言给我们!
【React项目配置6(前后端分离如何控制用户权限)】
文章图片
推荐阅读
- web网页模板|如此优秀的JS轮播图，写完老师都沉默了
- 接口|axios接口报错-参数类型错误解决
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
- vue|Vue面试常用详细总结
- javascript|vue使用js-xlsx导出excel，可修改格子样式，例如背景颜色、字体大小、列宽等
- css|我用css精灵图拼接了自己的英文名字，不会还有人不知道精灵图技术吧（）
- css|css三角的做法及其案例