React+Redux+Saga栈未验证邮箱用户全局访问拦截方案咨询

你原有代码不生效的第一个原因是判断逻辑写反：当前代码逻辑为邮箱已验证时跳转激活页，和需求完全相反，需要给判断条件加!取反。
第二个常见原因是未处理用户信息异步加载的状态：用户profile数据通常是登录后通过saga异步从后端拉取，页面初始化时profile还未返回，emailVerified初始值为undefined/false，会导致逻辑误判。

1. 修正私有路由拦截逻辑 #

统一封装私有路由组件，增加用户信息加载状态判断，避免初始化阶段的误跳转：

const PrivateRoute = ({ children, ...rest }) => {
  // 从redux取用户信息加载状态、用户数据
  const { profileLoading, profile } = useSelector(state => state.user)
  const location = useLocation()

  // 加载用户信息期间显示加载态，避免逻辑误判
  if (profileLoading) return <GlobalLoading />

  return (
    <Route
      {...rest}
      render={() => {
        // 未登录则跳转登录页
        if (!profile) {
          return <Redirect to="/login" state={{ from: location }} />
        }
        // 已登录但邮箱未验证则跳转激活页
        if (!profile.emailVerified) {
          return <Redirect to="/activate" state={{ from: location }} />
        }
        // 校验通过返回对应页面
        return children
      }}
    />
  )
}

注意：邮箱激活页、登录页等公开页面不要用该私有路由包裹，避免出现无限重定向。

2. Saga层全局接口拦截 #

为了避免用户绕开路由直接调用授权接口，需要在saga层对所有需要授权的请求做前置校验：

// 监听所有授权接口请求的saga
function* watchAuthRequest() {
  while (true) {
    // 替换为你项目中实际的授权接口请求action类型
    const requestAction = yield take('AUTH_API_REQUEST')
    const { profile } = yield select(state => state.user)
    
    // 邮箱未验证时直接阻断请求，跳转激活页
    if (profile && !profile.emailVerified) {
      // 用connected-react-router的push action实现路由跳转
      yield put(push('/activate'))
      continue
    }

    // 校验通过才执行实际请求逻辑
    yield call(handleApiRequest, requestAction.payload)
  }
}

同时在接口响应处理逻辑中增加统一错误拦截，约定后端返回邮箱未验证的专属错误码（如40301），收到该错误时直接触发跳转激活页的逻辑，和后端校验形成双重保障。

3. 状态持久化适配 #

如果项目使用了redux-persist做状态持久化，需要确保emailVerified字段被纳入持久化列表，避免页面刷新后状态丢失导致拦截失效。

前端拦截仅为体验优化，后端才是安全底线：所有需要授权的接口都必须增加邮箱验证状态校验，未验证用户调用授权接口时直接返回约定的错误码即可。

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