React项目中已选用户身份后禁止访问/profile页面的实现方案咨询

要满足已选择身份的用户无法访问/profile页面的需求，我们可以通过路由访问拦截+历史栈清理双逻辑实现，具体操作步骤如下：

步骤1：修复现有代码的Hook调用错误 #

你当前把useSelector写在了AppRoutes组件外部，不符合React Hook只能在函数组件/自定义Hook内部调用的规则，需要先把这行代码移到AppRoutes组件内部。

步骤2：封装针对/profile页面的路由守卫 #

我们专门封装一个路由守卫组件，拦截所有/profile的访问请求，判断用户已选择身份（id非空）时直接重定向到首页，未选择身份时才放行到身份选择页：

// 路由守卫组件
const ProfileRouteGuard: React.FC<{ component: React.ComponentType }> = ({ component: Component }) => {
  const { id } = useSelector((state: RootState) => state.profile);
  if (id) {
    // 已选择身份，重定向到首页，也可根据需求调整为跳转到用户当前所在页面
    return <Redirect to="/" />;
  }
  return <Component />;
};

// 修改后的AppRoutes代码
const Exams = lazy(() => import('../pages/private/Exams'));
const Home = lazy(() => import('../pages/private/Home'));
const ProfileSelector = lazy(() => import('../pages/private/ProfileSelector'));

const AppRoutes = () => {
    // useSelector移到组件内部
    const { id } = useSelector((state: RootState) => state.profile);
    return (
        <Router history={history}>
            <Suspense fallback={<LoadingPage />}>
                <Switch>
                    <Route exact path={'/'} component={Home} />
                    <Route exact path={'/exams'} component={Exams} />
                    {/* 替换原有的profile路由，新增守卫逻辑 */}
                    <Route 
                      exact 
                      path={'/profile'} 
                      render={() => <ProfileRouteGuard component={ProfileSelector} />} 
                    />
                </Switch>
            </Suspense>
        </Router>
    );
};

步骤3：清理历史栈，避免用户点返回键回到/profile #

在ProfileSelector页面的身份选择提交逻辑里，把跳转首页的方法从history.push('/')改为history.replace('/')，这样会直接把历史栈里的/profile记录替换为首页记录，用户点击浏览器返回箭头不会再回到身份选择页：

// ProfileSelector页面的身份选择逻辑示例
const handleProfileConfirm = (profile: UserProfileModel) => {
  dispatch(selectProfile(profile));
  // 用replace替换push，清除历史栈里的/profile记录
  history.replace('/');
}

可选优化：持久化身份数据兼容刷新场景 #

如果需要解决用户刷新页面后Redux状态丢失、拦截逻辑失效的问题，可以把身份数据同步存储到localStorage，修改你的profile store代码即可：

// 初始化时从localStorage读取已保存的身份数据
const getInitialState = (): UserProfileModel => {
  const savedProfile = localStorage.getItem('userProfile');
  if (savedProfile) return JSON.parse(savedProfile);
  return {
    id: '',
    council: '',
    state: '',
    number: '',
    description: '',
  };
}

const initialState: UserProfileModel = getInitialState();

export const userProfileSlice = createSlice({
    name: 'profile',
    initialState,
    reducers: {
        selectProfile: (state, action: PayloadAction<UserProfileModel>) => {
            const newState = { ...state, ...action.payload };
            // 选择身份后同步存到localStorage
            localStorage.setItem('userProfile', JSON.stringify(newState));
            return newState;
        },
        clearProfile: () => {
            // 清除身份时同步删除localStorage数据
            localStorage.removeItem('userProfile');
            return initialState;
        },
    },
});

内容的提问来源于stack exchange，提问作者PPNFilms