React实战知识点

1.路由鉴权
1.需要写service文件夹（一般也叫api文件夹），在里面url文件下写接口地址，index.js文件下封装获取数据的方法
2.引入cookies的封装文件
2.在脚手架的接口文件index.js里进行数据获取，按照返回值进行cookie的存贮，然后在router文件夹的index.js文件下获取存入cookie的值，在路由渲染之前进行平淡是否要渲染，还是跳转到授权页面进行登录
注意：此时跳转的路由path不能写正确值，写‘/’，且component不能用懒加载，，先引入该组件，直接写组件

2.路由守卫-用户权限
方法一：
1.在脚手架index.js文件下向后端请求数据，看传递过来的数据里用户名，存入cookie
2.在router文件夹下定义路由的时候，添加root属性
3.在router文件夹下进行遍历路由的时候，根据cookie的root属性值判断是全部渲染路由还是过滤掉router内root为user的路由
4.由于有些权限不够，导致一些页面无法加载，就会跳转到404文件夹页面，在404文件夹页面内进行判断是否是因为root为user导致无法页面加载，给与显示不同的页面

方法二：
1.直接在router文件夹下的index.js文件内，遍历渲染路由时，判断root内的root属性值，如果是user就return权限不够的页面，其他的正常渲染
2.这样就不需要在404页面进行设定，但是这样要在route标签内将component转为render，会导致路由属性没有，需要react-router-dom内的writeRouter,将函数名作为writeRouter的参数

3.路由监听-头部标签栏改变
1.在脚手架的app.js文件下，利用componentWillReceiveProps监听跳转到其他页面的路由属性，在nextProps内
2.但是这里原本是没有路由属性的，所以也要使用writeRouter去接收路由属性，这样nextProps就有路由的全部属性
3.为了解决在刷新时，数据还原，还需要使用componentDidMount，但是这样是参数的，所以我们使用this.props获取数据
拓展：可以设定一个属性，当检测到pathname为某个页面的时候，将底部标签栏去除，这个就需要在将属性和标签绑定