面试题：React 中 Redirect 重定向与状态管理结合应用

Question

在一个 React 应用里，使用 Redux 进行状态管理。当用户登录成功后，从 Redux store 中获取用户权限信息，如果权限为 'admin'，使用 Redirect 重定向到 '/admin/dashboard'，如果权限为 'user'，重定向到 '/user/profile'。请阐述实现思路并给出核心代码片段。

Answer 1

实现思路

1. 首先在 React 组件中订阅 Redux store 的变化，获取用户登录状态及权限信息。
2. 当检测到用户登录成功（可通过 Redux 中登录状态标志判断），获取权限信息。
3. 根据权限信息，使用 Redirect 组件进行重定向。

核心代码片段

import React from'react';
import { useSelector } from'react-redux';
import { Redirect } from'react-router-dom';

const UserRedirect = () => {
    const user = useSelector(state => state.user); // 假设 user 信息存储在 state.user 中
    if (user.isLoggedIn) {
        const { role } = user;
        if (role === 'admin') {
            return <Redirect to="/admin/dashboard" />;
        } else if (role === 'user') {
            return <Redirect to="/user/profile" />;
        }
    }
    return null;
};

export default UserRedirect;

假设 Redux store 中 state.user 结构如下：

{
    isLoggedIn: true,
    role: 'admin'
}