react 路由守卫权限
时间: 2023-07-07 15:35:55 浏览: 56
在 React 中实现路由守卫权限控制的方法,可以参考以下步骤:
1. 首先,需要在用户登录时获取到用户的权限信息,并保存到全局状态中。可以使用 Redux、MobX 等状态管理库来实现。
2. 在需要进行权限控制的组件中,引入 `Route` 组件,并在其 `render` 属性中进行权限判断。
```jsx
import { Route } from 'react-router-dom';
import { useSelector } from 'react-redux';
function PrivateRoute({ component: Component, ...rest }) {
const isAuthenticated = useSelector(state => state.auth.isAuthenticated);
const userRole = useSelector(state => state.auth.userRole);
return (
<Route {...rest} render={(props) => (
isAuthenticated && userRole === 'admin'
? <Component {...props} />
: <Redirect to='/login' />
)} />
);
}
```
在上述代码中,`PrivateRoute` 组件接收一个 `component` 属性,表示需要进行权限控制的组件。在组件的渲染函数中,通过 `useSelector` 钩子函数从全局状态中获取当前用户是否已经登录、用户角色等信息。根据这些信息,进行权限判断,如果用户已经登录且角色为管理员,则渲染传入的组件,否则重定向到登录页面。
3. 在路由配置中,使用 `PrivateRoute` 组件代替原来的 `Route` 组件,以实现路由守卫权限控制。
```jsx
<Switch>
<Route path='/login' component={LoginPage} />
<PrivateRoute path='/admin' component={AdminPage} />
<Route path='*' component={NotFoundPage} />
</Switch>
```
在上述代码中,`PrivateRoute` 组件被用来保护 `AdminPage` 组件,只有登录且角色为管理员的用户才能访问该页面。如果用户没有登录或者角色为普通用户,则会被重定向到登录页面。