反应路由器dom推送页面时反应上下文api丢失身份验证数据

Question

我有一个保存用户数据的上下文，当验证上下文用户为空时，我有另一个组件，如果上下文用户为空，我的组件应将用户重定向到登录页面，否则应呈现组件.我的路由器在我的 Authprovider 中，但在重新加载路由器时仍然会丢失用户数据。我发现另一篇有同样问题的帖子，说明是将路由器保留在 useauthprovider 中，但不适用于我的应用程序。

我的代码

function App() {
  let header = window.location.pathname === '/login' || '/cadastro' ? <Header /> : null;
  let footer = window.location.pathname === '/login' || '/cadastro' ? <Footer /> : null;
  return (
    <UseAuthProvider> // My use AuthProvider
      <Router>
        <div className='app-container' >
          <Switch>
            <Cart>
              <Header />
              <NavbarMenu />
              <div className='app-body'>
                <UseCampanhaProvider>
                  <PublicRoute exact path='/' component={Home} />
                  <PrivateRoute exact path='/cupom/:campaignId' component={CupomScreen} />
                  <PrivateRoute exact path='/carrinho' component={CartScreen} />
                </UseCampanhaProvider>
                <PublicRoute exact path='/login' restricted={true} component={Login} />
                <PublicRoute path='/cadastro' restricted={true} component={Cadastro} />
              </div>
              <AuthModal />
              {footer}
            </Cart>
          </Switch>
        </div>
      </Router >
    </UseAuthProvider>
  );
}
export default App;

我验证用户上下文的组件

const PrivateRoute = ({ component: Component, ...rest }) => {
    const { user } = useAuth();
    return (
        <Route {...rest} render={props => (
            !user ?
                <Redirect to='/login' />
                :
                <Component {...props} />
        )} />
    );
};

export default PrivateRoute;

我加载用户的上下文

const UseAuthProvider = ({ children }) => {
    const [user, setUser] = useState();
    const [open, setOpen] = useState(false)
    useEffect(() => {
        verifyUser(); //here i call the function when verify the localstorage
    }, [])
    const verifyUser = async () => {
        let tokenHeader = authHeader(); 
        if (tokenHeader) {
            await Api.post('/cliente/index', {}, {
                headers: {
                    ...tokenHeader
                }
            }).then((response) => {
                setUser(response.data.cliente)
            })
        }
    }
    const handleModal = () => {
        setOpen((state) => !state)
    }
    
    const Logout = async () => {
        localStorage.clear('acessToken-bolao')
        setUser(null)
    }
    return (
        <useAuthContext.Provider value={{ Auth, verifyUser, user, Register, Logout, open, handleModal }}>
            {children}
        </useAuthContext.Provider>
    )
}

我尝试调试我的应用程序，当我将用户重定向到另一个路由器时，在组件渲染之前我的用户返回未定义，并且在我的组件渲染之后上下文加载用户数据。

Answer 1

听起来您的整个应用程序正在卸载和重新安装。 在这种情况下，状态将丢失，因为它不仅仅是重新渲染。

您通过什么机制导航到新页面？ 如果我没记错 React-Router 你需要使用 如果您尝试使用 window.location 或 href 导航 url 本身，那么您正在重新加载整个页面（不使用 SPA 中的路由器）

如果路由正确，我预计只会重新加载 Switch 内的数据。