React登录后如何让AuthProvider的子组件Header自动重渲染

问题根因 #

1. checkAuth方法放在render函数中执行不符合React规范，render为纯函数，执行setState会触发重复渲染风险。
2. 登录成功后没有主动触发AuthProvider的状态更新，AuthProvider仅在自身重渲染且isAuth为false时才会校验登录状态，跳转路由不会主动触发其状态重新计算。

解决方案 #

方案1：主动通知状态更新（推荐，性能最优）

第一步：扩展AuthProvider暴露状态更新方法，同时将校验逻辑移到生命周期钩子中：

import React, { Component, createContext } from 'react'
import VerificationUserAuth from '../../utils/VerificationUserAuth'

const AuthContext = createContext()

class AuthProvider extends Component {
    constructor(props) {
        super(props)
        this.state = {
            isAuth: false,
        }
    }

    componentDidMount() {
        // 组件挂载时校验一次登录状态
        this.checkAuth()
    }

    checkAuth = () => {
        const user = new VerificationUserAuth().getUserConnected()
        this.setState({ isAuth: !!user })
    }

    // 提供登录成功后的状态更新方法
    loginSuccess = () => {
        this.setState({ isAuth: true })
    }

    // 提供登出方法可后续复用
    logout = () => {
        // 可补充清除用户缓存逻辑
        this.setState({ isAuth: false })
    }

    render() {
        return (
            <AuthContext.Provider value={{ 
                isAuth: this.state.isAuth,
                loginSuccess: this.loginSuccess,
                logout: this.logout,
                checkAuth: this.checkAuth
            }}>
                {this.props.children}
            </AuthContext.Provider>
        )
    }
}

const AuthConsumer = AuthContext.Consumer
export { AuthProvider, AuthConsumer, AuthContext }

第二步：登录页登录成功后主动调用loginSuccess方法：

// 登录组件示例（函数组件）
import { useContext } from 'react'
import { useNavigate } from 'react-router-dom'
import { AuthContext } from '你的Auth文件路径'
import { RoutesNames } from '你的路由配置路径'

function Login() {
    const { loginSuccess } = useContext(AuthContext)
    const navigate = useNavigate()

    const handleLoginSubmit = async (loginForm) => {
        // 原有登录接口请求、用户信息存储逻辑
        const loginResult = await requestLogin(loginForm)
        if (loginResult.success) {
            new VerificationUserAuth().saveUser(loginResult.user)
            // 调用context方法更新全局登录状态
            loginSuccess()
            // 跳转目标页
            navigate(RoutesNames.CATALOGUE)
        }
    }

    // 剩余组件渲染逻辑
}

方案2：路由变化自动校验（无需修改登录逻辑）

如果不想改动现有登录流程，可以在公共Layout组件中监听路由变化，每次路由切换时触发登录状态校验：

import { useContext, useEffect } from 'react'
import { useLocation } from 'react-router-dom'
import { AuthContext } from '你的Auth文件路径'

function Layout() {
    const { checkAuth } = useContext(AuthContext)
    const location = useLocation()

    // 路由路径变化时重新校验登录状态
    useEffect(() => {
        checkAuth()
    }, [location.pathname])

    // 原有Layout渲染逻辑
}

两种方案任选其一即可实现登录后Header自动更新，无需手动刷新页面。

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