基于 React-Router 和 Redux 实现前端权限管理方案-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，权限管理是不可避免的问题。常用的权限管理方式有两种：前端角色权限控制和后端接口权限控制。本文主要讲解前端角色权限控制的实现方案。

在 React 开发中，React-Router 和 Redux 是非常流行的技术方案。本文将基于 React-Router 和 Redux，结合实例代码，详细讲解如何实现前端角色权限控制。

前端角色权限控制

前端角色权限控制即前端页面功能是否展示或可操作的控制。例如，管理员可以看到删除按钮，而普通用户看不到。

在 React 开发中，可以通过组件的渲染来实现前端角色权限控制。但是，这种方式会导致一些问题：

当前角色发生变化时，需要重新渲染整个应用。
权限控制的逻辑散落在业务组件中，缺乏整体性和规范性。
权限控制的逻辑需要抽取到通用组件中，增加通用组件的复杂度。

为了解决这些问题，我们可以使用 React-Router 和 Redux 的集成方案来实现前端角色权限控制。

React-Router 和 Redux 集成方案

工作原理

路由配置中定义每个路由对应的权限。
当用户访问路由时，判断该路由对应的权限是否符合用户的角色。
如果符合，则渲染组件；如果不符合，则渲染一个无权访问的提示页面。
用户登录后，从后端获取用户的角色信息，并将角色信息保存到 Redux 中。
在判断路由权限时，从 Redux 中获取用户的角色信息。

示例代码

路由配置

// javascriptcn.com 代码示例
import { Route } from 'react-router-dom';
import { ConnectedRouter } from 'connected-react-router';
import { createBrowserHistory } from 'history';
import { PrivateRoute } from './components/PrivateRoute';
import { LoginPage } from './pages/LoginPage';
import { HomePage } from './pages/HomePage';
import { AdminPage } from './pages/AdminPage';

const history = createBrowserHistory();

const routes = (
  <ConnectedRouter history={history}>
    <Route exact path="/login" component={LoginPage} />
    <PrivateRoute exact path="/" component={HomePage} roles={['user', 'admin']} />
    <PrivateRoute exact path="/admin" component={AdminPage} roles={['admin']} />
  </ConnectedRouter>
);

export default routes;

PrivateRoute 组件

// javascriptcn.com 代码示例
import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import { useSelector } from 'react-redux';

export const PrivateRoute = ({ component: Component, roles, ...rest }) => {
  const user = useSelector(state => state.user);

  return (
    <Route
      {...rest}
      render={props => {
        if (!user.isAuthenticated) {
          // 未登录，跳转到登录页面
          return <Redirect to={{ pathname: '/login', state: { from: props.location } }} />;
        }

        if (!roles.includes(user.role)) {
          // 角色不符合，渲染一个无权访问的提示页面
          return <div>Access Denied</div>;
        }

        // 渲染组件
        return <Component {...props} />;
      }}
    />
  );
};

userReducer

// javascriptcn.com 代码示例
const initialState = {
  isAuthenticated: false,
  role: '',
};

export const userReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'USER_LOGIN_SUCCESS':
      return { ...state, isAuthenticated: true, role: action.data.role };
    case 'USER_LOGOUT':
      return initialState;
    default:
      return state;
  }
};

登录页面代码

// javascriptcn.com 代码示例
import React, { useState } from 'react';
import { useDispatch } from 'react-redux';

export const LoginPage = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const dispatch = useDispatch();

  const handleSubmit = e => {
    e.preventDefault();

    // 登录成功后，将角色信息保存到 Redux 中
    dispatch({ type: 'USER_LOGIN_SUCCESS', data: { role: 'user' } });
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Email:</label>
        <input type="text" value={email} onChange={e => setEmail(e.target.value)} />
      </div>
      <div>
        <label>Password:</label>
        <input type="password" value={password} onChange={e => setPassword(e.target.value)} />
      </div>
      <button type="submit">Login</button>
    </form>
  );
};

总结

本文通过实例代码，详细讲解了基于 React-Router 和 Redux 实现前端角色权限控制的方案。在实现权限控制时，我们应该尽量将权限控制的逻辑从业务组件中抽离出来，增加代码的整体性和规范性。同时，通过集成 React-Router 和 Redux，能够更好地实现前端角色权限控制。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6528bef87d4982a6ebb4d070