反应路由器 dom v6 验证

Question

我在尝试理解 react-router Auth 时遇到了最困难的时刻。我读过 React 提供的（可怕的）documentation numerous times and i have followed MANY tutorials on the web. Not a single one has worked. The example 是用打字稿写的，这使得它更难理解。请帮我解决这个问题。

他们（React 开发教程）使用上下文和提供程序。但我似乎也无法理解。 IMO 与 React-router 的其余部分不同，它非常复杂。

当我运行来自 auth.js 的登录功能时，它似乎可以工作，然后它只是将挂钩重置为 false 并且从不加载下一页。我觉得我很接近，但是 auth.js 文件有问题吗？

app.js

function RequireAuth({children}) {
  let location = useLocation();
  const { authed } = UseAuth();

  console.log(authed);


  return authed ? children : <Navigate to="/" state={{from: location}}/>;
}

<Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <BrowserRouter location={history.location} navigator={history}>
          <AuthProvider>
          <Routes>

          <Route index element={<Login setData={setData} type={type}/>} />


              <Route path="adminDashboard" element={
                <RequireAuth redirectTo="/"> 
                  <AdminDashboard />
                </RequireAuth>
                } 
              />
              

              <Route path="userDashboard" element={
                <RequireAuth redirectTo="/"> 
                  <UserDashboard />
                </RequireAuth>
              } />
           </Routes>
          </AuthProvider>
        </BrowserRouter>
      </PersistGate>
    </Provider>

login.js

  const auth = UseAuth();
  auth.login();

auth.js auth.js 文件来自单独的教程

import * as React from "react";

const authContext = React.createContext({
  authed: false,
  login: () => {},
  logout: () => {}
});

export default function UseAuth() {
  return React.useContext(authContext);
}

export function AuthProvider({ children }) {
  const [authed, setAuthed] = React.useState(false);
  let auth = UseAuth();

  const login = () => setAuthed(true, console.log(authed));
  const logout = () => setAuthed(false);

  let value = { authed, login, logout };


  return (
    <authContext.Provider value={value}>
      {children}
    </authContext.Provider>
  );
}

Answer 1

useAuth returns 授权的 3 件事，login() 和 logout()。所以当你调用 let auth = useAuth() 时，auth 是一个包含所有这三个的对象。

尝试解构以使用 Auth returns 喜欢

const { authed, login, logout } = useAuth()

并改用 authed

Answer 2

你看起来确实很亲密。 useAuth 挂钩 returns 一个对象 { authed, login, logout }，但您在 RequireAuth 包装器中命名了整个对象 auth组件并使用 it 作为条件。它是一个已定义的对象，所以它总是是真实的。看起来您只需要从该对象访问 authed 属性即可知道用户是否已通过身份验证。

function RequireAuth({ children }) {
  const location = useLocation();
  const { authed } = useAuth();
  return auth ? children : <Navigate to="/" state={{from: location}}/>;
}

您似乎也有点混淆了您的身份验证上下文。状态应该驻留在上下文提供者中，而 useAuth 挂钩 returns 提供的值。

const authContext = React.createContext({
  authed: false,
  login: () => {},
  logout: () => {}
});

export default function useAuth() {
  return React.useContext(authContext);
}

export function AuthProvider({ children }) {
  const [authed, setAuthed] = React.useState(false);

  const login = () => setAuthed(true);
  const logout = () => setAuthed(false);

  return (
    <authContext.Provider value={{ authed, login, logout }}>
      {children}
    </authContext.Provider>
  );
}

反应路由器 dom v6 验证

React router dom v6 Auth

authentication

reactjs

react-router-dom