1.在react的权限控制中，主要是使用在路由加载的时候需要认证，在管理平台中有很多需要进行认证的需求，不同的角色是需要不同的权限等
在这里我主要是使用权限组件来实现，角色的权限管理
1.在页面中创建auth文件夹，在文件夹下创建AuthorizedRoute.js
主要代码内容如下：
import React, { Component } from 'react';
import { Route, Redirect } from 'react-router-dom'
class AuthorizedRoute extends Component {
constructor(props) {
super(props);
this.state = {
}
}
render() {
const { component: Component, ...rest } = this.props
const isLogged = localStorage.getItem('token')?true:false;//根据浏览器中判断是否存在token来判断处于什么状态
return (
<Route {...rest} render={(props)=>{
return isLogged?<Component {...props}/>:<Redirect to='/login'/>
}}/>
);
}
}
export default AuthorizedRoute;
代码分析：
在AuthorizedRoute.js文件中主要是看localStorage中是否有token信息来判断是否加载该路由下的元素，否则返回登录页面，进行登录，存储登录信息
在路由中使用验证组件AuthorizedRoute
在app.js中需要写下此代码
import React, { Component } from 'react';
import { Redirect ,HashRouter as Router, Route, Link } from 'react-router-dom'
import Login from './login'
import Home from './Components/home/home'
import AuthorizedRoute from '../src/Components/auth/AuthorizedRoute'
/**
* 可以完善的地方：
* 1.路由的守卫
* 2.权限的验证
* 3.当前代码的简化
*
*
*
*
*
*
*/
class App extends Component {
componentDidMount(){
console.log('这是app界面')
}
render() {
return (
<Router>
<div style={{width:'100%',height:'100%'}}>
{/**配置路由使用 */}
<Route exact path='/login' component={Login} />
<AuthorizedRoute path='/home' component={Home}/>
</div>
</Router>
);
}
}
export default App;
