如何在React / Ant Design Pro中实现认证路由

import { Redirect, Route, Switch } from 'react-router-dom';
import { connect } from 'dva';
import React from 'react';
import Authorized from '@/utils/Authorized';
import { getAuthority } from '@/utils/authority';

const BasicLayout = props => {
  const { dispatch, children, settings } = props;

  // 获取用户权限
  const authorized = getAuthority();

  // 设置Authorized组件的权限
  const AuthorizedRoute = Authorized(['admin', 'user']);

  // 判断用户是否已登录
  const isLogin = authorized && authorized !== 'guest';

  // 如果用户未登录，则重定向到登录页面
  if (!isLogin) {
    return <Redirect to="/user/login" />;
  }

  return (
    <div>
      <h1>Header</h1>
      <Switch>
        {renderRoutes(children, authorized, AuthorizedRoute)}
        <Redirect exact from="/" to="/dashboard" />
      </Switch>
      <h1>Footer</h1>
    </div>
  );
};

export default connect(({ global }) => ({
  settings: global.settings,
}))(BasicLayout);

const renderRoutes = (routes, authorized, AuthorizedRoute) => {
  return routes.map(route => {
    const { path, redirect, routes: childRoutes, authority } = route;

    // 如果路由需要权限验证，则使用AuthorizedRoute组件
    if (authority && !AuthorizedRoute(authority, authorized)) {
      return null;
    }

    // 如果路由有子路由，则递归渲染子路由
    if (childRoutes) {
      return renderRoutes(childRoutes, authorized, AuthorizedRoute);
    }

    // 如果路由有重定向，则使用Redirect组件
    if (redirect) {
      return <Redirect key={path} exact from={path} to={redirect} />;
    }

    // 否则使用Route组件
    return <Route key={path} exact path={path} component={route.component} />;
  });
};

const Dashboard = () => {
  return <h1>Dashboard Page</h1>;
};

export default Dashboard;

import Dashboard from '@/pages/Dashboard';

const routes = [
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: Dashboard,
    authority: ['admin', 'user'], // 路由需要的权限
  },
];

export default routes;

export function getAuthority() {
  // 获取用户权限的逻辑，可以根据实际情况进行修改
  return localStorage.getItem('authority');
}

export function Authorized(authority, currentAuthority) {
  // 权限验证的逻辑，可以根据实际情况进行修改
  if (!authority) {
    return true;
  }

  if (Array.isArray(authority)) {
    return authority.includes(currentAuthority);
  }

  return authority === currentAuthority;
}

const GlobalModel = {
  namespace: 'global',
  state: {
    settings: {},
  },
  reducers: {},
  effects: {},
};

export default GlobalModel;

// 定义接口请求的逻辑，可以根据实际情况进行修改

const UserLogin = () => {
  return <h1>Login Page</h1>;
};

export default UserLogin;

const UserRegister = () => {
  return <h1>Register Page</h1>;
};

export default UserRegister;

const User = () => {
  return <h1>User Page</h1>;
};

export default User;

const NotFound = () => {
  return <h1>404 Page Not Found</h1>;
};

export default NotFound;

import React from 'react';
import { Link } from 'react-router-dom';

const UserLayout = props => {
  const { children } = props;

  return (
    <div>
      <h1>User Layout</h1>
      <ul>
        <li>
          <Link to="/user/login">Login</Link>
        </li>
        <li>
          <Link to="/user/register">Register</Link>
        </li>
      </ul>
      {children}
    </div>
  );
};

export default UserLayout;

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { ConfigProvider } from 'antd';
import zhCN from 'antd/es/locale/zh_CN';
import BasicLayout from '@/layouts/BasicLayout';
import UserLayout from '@/layouts/UserLayout';
import NotFound from '@/pages/NotFound';
import routes from '@/config/routes';

const App = () => {
  return (
    <ConfigProvider locale={zhCN}>
      <Router>
        <Switch>
          <Route path="/user" component={UserLayout} />
          <Route path="/" component={BasicLayout} />
          <Route component={NotFound} />
        </Switch>
      </Router>
    </ConfigProvider>
  );
};

export default App;

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createBrowserHistory } from 'history';
import { createStore } from 'redux';
import App from './app';
import GlobalModel from './models/global';
import './index.css';

const history = createBrowserHistory();
const store = createStore(GlobalModel);

ReactDOM.render(
  <Provider store={store}>
    <App history={history} />
  </Provider>,
  document.getElementById('root')
);