如何使用react auth kit在重新加载后保持身份验证

Question

我对应用程序中的身份验证概念很陌生，尤其是使用令牌。我找到了react-auth-kit库来帮助我进行身份验证。我使用用户名和密码进行了简单的登录，并设置了在 Postman 上运行良好的后端。我还设法在仪表板中对用户进行身份验证，但是当我重新加载页面时，用户会被发送回登录页面。

我尝试使用 sessionStorage，有人在博客中指出它存在安全风险，但也没有成功。我在文档中没有看到这个概念。有人能给我指出正确的方向吗，也许是一个更好的库或解决这个问题的方法？

// In my app component...
import Login from "./components/Login";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Dashboard from "./pages/Dashboard";
import { useIsAuthenticated } from 'react-auth-kit'
import { useEffect, useState } from "react";

function App() {
  const redirect = () => {
    if (isAuthState) {
      return <Dashboard />
    } else {
      return <Login />
    }
  }
  return (
      <BrowserRouter>
        {/* <Login /> */}
        <Routes>
          <Route path='/' element={ <Login /> } />
          <Route path='/Dashboard' element={redirect()} />
        </Routes>
      </BrowserRouter>
  );
}

// In my Login component this is the handler for the form. I used react-hook-form for validation...

const signIn = useSignIn()
  const navigate = useNavigate()

  const login: SubmitHandler<Inputs> = (data) => {
    axios.post<SignInType>('http://127.0.0.1:8000/api/login', data)
      .then((res) => {
        if(res.data.status === 200) {
          if(signIn({token: res.data.token, tokenType: 'Bearer', expiresIn: 300000})) {
            navigate('/dashboard')
          }
        } else {
          setCredentialsError('Invalid credentials, please try again...')
        }
      })
  };

Answer 1

如果您还没有找到解决方案，请确保您在signIn()函数中定义了authState。

Answer 2

请向signIn方法添加authState属性，如下所示！

signIn({token: res.data.token, tokenType: 'Bearer', expiresIn: 300000, authState: {something: true}})