react 通过后端接口实现路由授权的示例代码

npm install react-router-dom
npm install redux react-redux
npm install axios

// api.js
import axios from 'axios';

const api = axios.create({
  baseURL: 'https://your-api-base-url.com',
});

export const login = async (username, password) => {
  const response = await api.post('/login', { username, password });
  return response.data;
};

export const getUserPermissions = async () => {
  const response = await api.get('/permissions');
  return response.data;
};

// store.js
import { createStore } from 'redux';

const initialState = {
  auth: {
    isAuthenticated: false,
    permissions: [],
  },
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'LOGIN':
      return {
        ...state,
        auth: {
          ...state.auth,
          isAuthenticated: true,
          permissions: action.payload.permissions,
        },
      };
    case 'LOGOUT':
      return {
        ...state,
        auth: {
          ...state.auth,
          isAuthenticated: false,
          permissions: [],
        },
      };
    default:
      return state;
  }
};

const store = createStore(reducer);

export default store;

// components/Login.js
import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { useHistory } from 'react-router-dom';
import { login, getUserPermissions } from '../api';

const Login = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const dispatch = useDispatch();
  const history = useHistory();

  const handleLogin = async () => {
    try {
      await login(username, password);
      const permissions = await getUserPermissions();
      dispatch({ type: 'LOGIN', payload: { permissions } });
      history.push('/');
    } catch (error) {
      console.error('Login failed', error);
    }
  };

  return (
    <div>
      <h1>Login</h1>
      <input
        type="text"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
        placeholder="Username"
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Password"
      />
      <button onClick={handleLogin}>Login</button>
    </div>
  );
};

export default Login;

// App.js
import React from 'react';
import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
import { useSelector } from 'react-redux';
import Home from './components/Home';
import Dashboard from './components/Dashboard';
import Profile from './components/Profile';
import Login from './components/Login';
import PrivateRoute from './components/PrivateRoute';

const App = () => {
  const permissions = useSelector((state) => state.auth.permissions);

  const routes = [
    { path: '/', component: Home, roles: ['user', 'admin'], exact: true },
    { path: '/dashboard', component: Dashboard, roles: ['admin'] },
    { path: '/profile', component: Profile, roles: ['user', 'admin'] },
    { path: '/login', component: Login, roles: [] },
  ];

  const filteredRoutes = routes.filter((route) =>
    route.roles.some((role) => permissions.includes(role))
  );

  return (
    <Router>
      <Switch>
        {filteredRoutes.map((route, index) => (
          <PrivateRoute
            key={index}
            path={route.path}
            component={route.component}
            roles={route.roles}
            exact={route.exact}
          />
        ))}
        <Route path="/login" component={Login} />
        <Redirect to="/" />
      </Switch>
    </Router>
  );
};

export default App;

// components/PrivateRoute.js
import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import { useSelector } from 'react-redux';

const PrivateRoute = ({ component: Component, roles, ...rest }) => {
  const { isAuthenticated, permissions } = useSelector((state) => state.auth);

  return (
    <Route
      {...rest}
      render={(props) =>
        isAuthenticated && roles.some((role) => permissions.includes(role)) ? (
          <Component {...props} />
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  );
};

export default PrivateRoute;