React 应用中实现操作按钮的权限控制

React 应用中实现操作按钮的权限控制

可以通过以下步骤来完成：

• 定义权限数据结构：后端接口返回用户权限数据，并在前端进行管理。
• 管理用户权限状态：使用 Redux 或 Context API 来管理用户权限状态。
• 基于权限渲染按钮：根据用户的权限来决定是否渲染某些按钮。

示例实现

1. 定义后端接口调用和权限数据结构

创建 api.js 文件，用于定义后端接口调用：

// src/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;
};

2. 创建 Redux Store 管理权限状态

使用 Redux Toolkit 创建一个 Redux Store：

// src/store.js
import { configureStore, createSlice } from '@reduxjs/toolkit';

const authSlice = createSlice({
  name: 'auth',
  initialState: {
    isAuthenticated: false,
    permissions: [],
  },
  reducers: {
    login: (state, action) => {
      state.isAuthenticated = true;
      state.permissions = action.payload.permissions;
    },
    logout: (state) => {
      state.isAuthenticated = false;
      state.permissions = [];
    },
  },
});

export const { login, logout } = authSlice.actions;
export default configureStore({
  reducer: {
    auth: authSlice.reducer,
  },
});

3. 用户登录并获取权限数据

创建一个 Login 组件，用于用户登录和获取权限数据：

// src/pages/Login.jsx
import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { useHistory } from 'react-router-dom';
import { login, getUserPermissions } from '../api';
import { login as loginAction } from '../store';

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(loginAction({ 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;

4. 创建权限控制组件

创建一个 PermissionButton 组件，用于基于权限渲染按钮：

// src/components/PermissionButton.jsx
import React from 'react';
import { useSelector } from 'react-redux';

const PermissionButton = ({ permission, children }) => {
  const permissions = useSelector((state) => state.auth.permissions);

  return permissions.includes(permission) ? children : null;
};

export default PermissionButton;

5. 在组件中使用 PermissionButton

在需要权限控制的地方使用 PermissionButton 组件：

// src/pages/Dashboard.jsx
import React from 'react';
import PermissionButton from '../components/PermissionButton';

const Dashboard = () => {
  return (
    <div>
      <h1>Dashboard</h1>
      <PermissionButton permission="view_reports">
        <button>View Reports</button>
      </PermissionButton>
      <PermissionButton permission="edit_settings">
        <button>Edit Settings</button>
      </PermissionButton>
    </div>
  );
};

export default Dashboard;