React中已认证用户访问登录/注册页的高效跳转实现方案

我的React应用路由与上下文结构如下：

const App = () => 
    <AuthContextProvider>
    <IntelContextProvider>
       <Routes>
            <Route path="/" element={<Layout />}>
            <Route path="login" element={<Authentication />} />
            <Route path="register" element={<Registration />} />
                <Route element={<RequireAuth />}>
                    <Route path="/" element={<Home />} />
                </Route>
                <Route path="*" element={<NotFound />} />
            </Route>
       </Routes>
    </IntelContextProvider>
    </AuthContextProvider>

认证机制采用内存存储access token（通过AuthContextProvider）、HttpOnly Cookie存储refresh token的方式。

首页通过以下RequireAuth组件实现受保护路由：

export const RequireAuth = () => {
    const location = useLocation()
    const {auth} = useAuth()  
    return (auth?.username ? 
         <Outlet/> : 
         <Navigate to='/login' state={{from: location}} replace/> )
}

未认证用户会被正常跳转到/login，但我需要实现反向逻辑：当用户持有有效refresh token时，刷新页面或访问/register、/login页面时，路由需自动跳转到Home组件。

我曾尝试在Authentication组件中处理，但会先渲染登录页再跳转（受React生命周期影响），且需要在/register等路由重复实现，不够优雅。相关代码如下：

const Authentication = () => {
    
    const [authenticated, setAuthenticated] = useState(null)
    const {values, errors, handleChange, handleSubmit} = useAuthenticationForm(validate)    
    const silentlySignIn = useSilentSignIn()

    useEffect(() => {
        const silentlyLogin = async () => {
            const isAuthenticated = await silentlySignIn()
            if(isAuthenticated) setAuthenticated(true)
        }
        silentlyLogin()
        // eslint-disable-next-line
    }, [])
    
    return (
        authenticated ? <Navigate to='/'/> :
        <main className="authentication">
            <form>
               ...
            </form>
        </main>
    );
}

我的AuthContext、useSignIn、useSilentSignIn实现如下：

export const AuthContextProvider = ({ children }) => {
    const [auth, setAuth] = useState()

    return (
        <AuthContext.Provider value={{ auth, setAuth }}>
            {children}
        </AuthContext.Provider>
    )
}

const useSignIn = () => {
    const [success, setSuccess] = useState(false)
    const [error, setError] = useState()
    const { setAuth } = useAuth()

    const signIn = async (payload) => {
        try {
            setError(null)
            const { headers: { authorization: token }, data: { uuid } } = await axiosPrivate.post(`/login`, payload)
            setAuth({ token, uuid, username: payload.username })
            setSuccess(true)
        } catch (error) {
            console.log(error.message)
            if (!error.response) setError('Sistema temporariamente indisponível.')
            else if (error.response.status === 401) setError('Usuário ou senha inválidos.')
            else setError('Algo deu errado.')
        }
    }
    return [signIn, success, error]
}

const useSilentSignIn = () => {
    const { auth, setAuth } = useAuth()

    const silentlySignIn = async () => {
        try {
            if (auth?.uuid) return false
            const response = await axiosPrivate.get('/refresh-token')
            const token = response.headers.authorization
            const uuid = response.data.uuid
            const username = response.data.username
            setAuth(prev => ({ ...prev, token, uuid, username }))
            return true
        } catch (error) {
            console.log('Logged out. Please sign in.')
            return false
        }
    }
    return silentlySignIn
}

1. 新增反向保护路由组件RequireUnauth #

和RequireAuth对应，专门处理已认证用户访问登录/注册页的跳转逻辑，避免在多个组件重复实现：

export const RequireUnauth = () => {
    const location = useLocation();
    const { auth } = useAuth();
    const silentlySignIn = useSilentSignIn();
    const [isChecking, setIsChecking] = useState(true);

    useEffect(() => {
        const checkAuth = async () => {
            // 尝试静默登录，用refresh token获取新access token
            await silentlySignIn();
            setIsChecking(false);
        };
        checkAuth();
    }, [silentlySignIn]);

    // 认证状态校验中，返回加载组件避免闪现登录页
    if (isChecking) {
        return <div>加载中...</div>; // 可替换为项目全局加载组件
    }

    // 已认证则跳转到首页，否则渲染子路由内容
    return auth?.username ? (
        <Navigate to="/" state={{ from: location }} replace />
    ) : (
        <Outlet />
    );
}

2. 修改路由结构，用RequireUnauth包裹登录/注册路由 #

把/login和/register路由放到RequireUnauth的子路由下，统一管控：

const App = () => 
    <AuthContextProvider>
    <IntelContextProvider>
       <Routes>
            <Route path="/" element={<Layout />}>
                {/* 已认证用户禁止访问的路由 */}
                <Route element={<RequireUnauth />}>
                    <Route path="login" element={<Authentication />} />
                    <Route path="register" element={<Registration />} />
                </Route>
                {/* 需要认证才能访问的路由 */}
                <Route element={<RequireAuth />}>
                    <Route path="/" element={<Home />} />
                </Route>
                <Route path="*" element={<NotFound />} />
            </Route>
       </Routes>
    </IntelContextProvider>
    </AuthContextProvider>

3. 优化AuthContext的初始化逻辑（可选） #

为避免页面刷新后auth状态为空的短暂窗口，可在AuthContextProvider中直接执行静默登录，提前完成认证状态初始化：

export const AuthContextProvider = ({ children }) => {
    const [auth, setAuth] = useState();
    const [isInitializing, setIsInitializing] = useState(true);

    useEffect(() => {
        const initAuth = async () => {
            try {
                const response = await axiosPrivate.get('/refresh-token');
                const token = response.headers.authorization;
                const uuid = response.data.uuid;
                const username = response.data.username;
                setAuth({ token, uuid, username });
            } catch (error) {
                console.log('无有效refresh token');
            } finally {
                setIsInitializing(false);
            }
        };
        initAuth();
    }, []);

    // 初始化期间展示全局加载页，避免路由跳转闪烁
    if (isInitializing) {
        return <div>初始化中...</div>;
    }

    return (
        <AuthContext.Provider value={{ auth, setAuth }}>
            {children}
        </AuthContext.Provider>
    );
}

4. 移除Authentication组件中的冗余代码 #

现在不需要在登录组件里单独处理跳转逻辑，删掉相关状态和副作用：

const Authentication = () => {
    const {values, errors, handleChange, handleSubmit} = useAuthenticationForm(validate)    
    const [signIn, success, error] = useSignIn()

    return (
        <main className="authentication">
            <form onSubmit={handleSubmit(signIn)}>
               {/* 表单内容 */}
            </form>
        </main>
    );
}

• 统一管控：所有需限制已认证用户访问的路由都通过RequireUnauth处理，无需重复编码
• 避免闪烁：通过加载状态等待认证校验完成，不会先渲染登录/注册页再跳转
• 状态提前初始化：在Context层面完成认证状态初始化，路由组件拿到的是最终的认证状态

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