前后端分离如何控制用户权限（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,

后台拿到这个token，就知道用户身份，也收到用户权限，会再返回数据里告诉你权限中是否有删除按钮。这样就实现了权限控制。