最近在做一个迭代了很久的路由改造的需求，emmmm，甚是头疼，于是开始重新设计，重做了一版简单清晰的路由权限管理，今天分享下一套最最最最最最~简单的基于React-Router路由权限管理思路和实现；思路很简单，内容有点长，我们话不多说，action！
React-Router是一个用于构建单页应用程序（SPA）的库，它可以通过URL的变化动态更新页面内容，同时支持路由嵌套和路由拦截等功能。在一个复杂的应用程序中，通常会有不同的用户角色，每个角色拥有不同的权限。为了保证应用程序的安全性和稳定性，我们需要对路由进行权限控制，确保只有具有相应权限的用户才能访问相应的页面。
在React中，我们可以通过React-Router提供的一些组件和API实现路由权限控制。下面是一个基于React和React-Router的路由权限控制思路：
1. 定义路由配置文件
首先，我们需要定义一个路由配置文件，用来描述应用程序中的所有路由和它们对应的组件。在路由配置文件中，我们可以为每个路由添加一个权限字段，表示该路由需要的最低权限。
例如，我们可以定义一个路由配置文件routes.js：
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Dashboard from './pages/Dashboard';
import NotFound from './pages/NotFound';
const routes = [
{
path: '/',
component: Home,
exact: true,
permissions: ['user'],
},
{
path: '/about',
component: About,
permissions: ['user', 'admin'],
},
{
path: '/dashboard',
component: Dashboard,
permissions: ['admin'],
},
{
path: '*',
component: NotFound,
permissions: ['user', 'admin'],
},
];
const renderRoutes = () => (
<Switch>
{routes.map((route) => (
<Route
key={route.path}
path={route.path}
exact={route.exact}
render={(props) => {
const { permissions } = currentUser; // 假设当前用户信息存储在全局变量currentUser中
if (!permissions.includes(route.permissions)) {
return <Redirect to="/404" />;
}
return <route.component {...props} />;
}}
/>
))}
</Switch>
);
export default renderRoutes;
在上面的代码中，我们定义了四个路由，分别对应Home、About、Dashboard和NotFound这四个组件。每个路由都有一个permissions字段，表示该路由需要的最低权限。例如，Home路由只需要普通用户的权限，而Dashboard路由则需要管理员的权限。
在renderRoutes函数中，我们使用Switch和Route组件来定义路由匹配规则。对于每个路由，我们都会检查当前用户的权限，如果用户没有足够的权限，则跳转到/404路由。
2. 实现用户登录功能
在应用程序中实现用户登录功能非常重要，因为只有登录的用户才能被授权访问某些页面。在React中，我们可以使用useState和useEffect这两个钩子函数来实现用户登录功能。具体实现方式如下：
2.1 在全局状态中存储用户信息
我们可以在全局状态中存储用户信息，包括用户ID、用户名、角色等信息。这样，在整个应用程序中，我们都可以方便地获取到当前用户的信息。
例如，我们可以使用useReducer钩子函数来管理全局状态：
const initialState = {
currentUser: null,
};
const reducer = (state, action) => {
switch (action.type) {
case 'LOGIN':
return {
...state,
currentUser: action.payload,
};
case 'LOGOUT':
return {
...state,
currentUser: null,
};
default:
return state;
}
};
const [state, dispatch] = useReducer(reducer, initialState);
在上面的代码中，我们定义了一个初始状态initialState，包含一个currentUser字段，表示当前用户信息。我们使用useReducer来管理全局状态，并定义了两个操作：LOGIN和LOGOUT。当用户登录成功后，我们会将用户信息存储到currentUser字段中；当用户退出登录后，我们会将currentUser字段设置为null。
2.2 实现登录页面
在React中，我们可以使用表单组件来实现用户登录页面。在表单提交后，我们可以使用axios等库来向后端发送请求，进行登录验证。如果登录成功，我们可以将用户信息存储到全局状态中，并跳转到首页；如果登录失败，则显示错误信息。
例如，我们可以实现一个简单的登录页面：
import React, { useState } from 'react';
import { useHistory } from 'react-router-dom';
import axios from 'axios';
const Login = () => {
const history = useHistory();
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState('');
const handleSubmit = async (e) => {
e.preventDefault();
try {
const response = await axios.post('/api/login', {
username,
password,
});
const { userId, username, role } = response.data;
dispatch({ type: 'LOGIN', payload: { userId, username, role } });
history.push('/');
} catch (error) {
setError('用户名或密码错误');
}
};
return (
<form onSubmit={handleSubmit}>
<div>
<label>用户名：</label>
<input type="text" value={username} onChange={(e) => setUsername(e.target.value)} />
</div>
<div>
<label>密码：</label>
<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
</div>
{error && <div>{error}</div>}
<button type="submit">登录</button>
</form>
);
};
export default Login;
在上面的代码中，我们定义了一个Login组件，包含一个表单和相关的状态。在表单提交后，我们使用axios库向后端发送请求，进行登录验证。如果登录成功，我们会将用户信息存储到全局状态中，并跳转到首页；如果登录失败，则显示错误信息。
3. 实现路由拦截
在React-Router中，我们可以使用Route组件来定义路由规则。为了实现路由权限控制，我们可以在定义路由时，使用render属性来渲染组件，并在渲染组件前进行权限判断。
例如，我们可以定义一个PrivateRoute组件来实现路由拦截功能：
import React, { useContext } from 'react';
import { Route, Redirect } from 'react-router-dom';
import { AppContext } from './AppContext';
const PrivateRoute = ({ component: Component, requiredRoles, ...rest }) => {
const { currentUser } = useContext(AppContext);
if (!currentUser) {
// 用户未登录，跳转到登录页
return <Redirect to="/login" />;
}
if (!requiredRoles.includes(currentUser.role)) {
// 用户无权限，跳转到404页
return <Redirect to="/404" />;
}
// 渲染组件
return <Route {...rest} render={(props) => <Component {...props} />} />;
};
export default PrivateRoute;
在上面的代码中，我们定义了一个PrivateRoute组件，接受三个属性：
component：要渲染的组件requiredRoles：该路由需要的角色列表rest：其他属性
在PrivateRoute组件中，我们使用useContext钩子函数来获取全局状态中的currentUser信息。如果用户未登录，则跳转到登录页；如果用户角色不符合要求，则跳转到404页。如果用户有权限，则渲染组件。
我们可以在应用程序中使用PrivateRoute组件来定义路由规则，并传递需要的角色列表。例如：
import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Home from './Home';
import Dashboard from './Dashboard';
import Profile from './Profile';
import Login from './Login';
import NotFound from './NotFound';
import PrivateRoute from './PrivateRoute';
const App = () => {
return (
<Switch>
<Route exact path="/" component={Home} />
<PrivateRoute path="/dashboard" component={Dashboard} requiredRoles={['admin']} />
<PrivateRoute path="/profile" component={Profile} requiredRoles={['user', 'admin']} />
<Route path="/login" component={Login} />
<Route path="/404" component={NotFound} />
<Redirect to="/404" />
</Switch>
);
};
export default App;
在上面的代码中，我们使用PrivateRoute组件来定义需要权限控制的路由，例如/dashboard和/profile。我们通过传递requiredRoles属性来指定该路由需要的角色列表。
4. 总结
在本文中，我们讨论了如何使用React-Router来实现路由权限控制。我们首先介绍了如何使用全局状态来存储用户信息，以便在整个应用程序中方便地获取当前用户信息。然后，我们讨论了如何实现登录页面和路由拦截功能，以控制用户访问受限的路由。最后，我们提供了一个PrivateRoute组件的示例代码，该组件用于拦截未登录或无权限的用户，并重定向到登录或404页面。通过这些步骤，我们可以为我们的React应用程序提供简单而有效的路由权限控制功能。
最后，我们需要注意一些潜在的安全问题。在实际应用中，我们可能需要使用加密技术来保护用户信息，以及使用其他安全措施来防止恶意攻击。我们还需要考虑如何在用户访问受限路由时，避免将实际的路由信息暴露给未授权的用户。因此，在实际应用中，我们需要更深入地研究安全问题，并采取适当的措施来确保应用程序的安全性。
希望这篇文章能够帮助你了解如何在React应用程序中实现路由权限控制。如果你有任何问题或意见，请随时在下面的评论区留言。
