使用 localstorage 设置令牌后页面不重定向

Question

我正在按照下面的教程为我的登录应用程序创建令牌系统。

https://www.digitalocean.com/community/tutorials/how-to-add-login-authentication-to-react-applications

这是我的代码：

App.js:

import logo from './logo.svg';
import './App.css';
import "bootstrap/dist/css/bootstrap.min.css";
import useToken from './components/useToken';
import Navbar from './components/Navbar';
import AudioDropzone from './components/AudioDropzone';

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useLocation
} from "react-router-dom";

import Upload from './pages/Upload';
import Manage from './pages/Manage';
import Menu from './pages/Menu';
import Admin from './pages/Admin';
import Login from './pages/Login';

import { useEffect, useState } from 'react';

<script src="https://unpkg.com/boxicons@latest/dist/boxicons.js"></script>

function App() {

  const { token, setToken } = useToken();
  console.log(token)
  if(!token) {
    return(
      <div className="App">
        <div className="row">
          <div class="col-2">
          </div>
          <div class="col-9">
            <Login setToken={setToken} />
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="App">
      <Router>
        <head>
          <link rel="stylesheet" href="boxicons.min.css" />
        </head>
        <div className="row" >
          <div class="col-2">
          </div>
          <div class="col-9">
            <Switch>
              <Route path="/upload">
                <Upload customer_id={token}/>
              </Route>
              <Route path="/manage">
                <Manage customer_id={token} />
              </Route>
              <Route path="/menu">
                <Menu customer_id={token} />
              </Route>
              <Route path="/admin">
                <Admin />
              </Route>
              <Route path="/admin/upload">
                <Upload />
              </Route>
              <Route path="/admin/manage">
                <Manage />
              </Route>
              <Route path="/admin/menu">
                <Menu />
              </Route>
            </Switch>
          </div>
        </div>

      </Router>
    </div>
  );
}

export default App;

useToken.js:

import { useState } from 'react';

export default function useToken() {
  const getToken = () => {
    const tokenString = localStorage.getItem('token');
    const userToken = JSON.parse(tokenString);
    return userToken?.token
  };

  const [token, setToken] = useState(getToken());

  const saveToken = userToken => {
    localStorage.setItem('token', JSON.stringify(userToken));
    setToken(userToken.token);
  };
  
  return {
    setToken: saveToken,
    token
  }
}

目前，当登录成功时，它只是清除字段并再次显示相同的登录页面，而不会显示包含我所有内容的第二版应用程序。问题是令牌值没有被更新和填充。我已验证登录后令牌已更新为整数值，如 13。

这是我在 useToken.js 中记录 userToken 值时看到的：

  const saveToken = userToken => { 
    console.log(userToken) //returns 13
    localStorage.setItem('token', JSON.stringify(userToken));
    setToken(userToken.token);
  };

让我知道我做错了什么！

Answer 1

我认为错误出在 saveToken 函数中。

setToken(userToken.token); 应该是 setToken(userToken);

您不需要 .token，因为 userToken 不是对象。它只是一个整数值。

使用 localstorage 设置令牌后页面不重定向

page does not redirect after setting token with localstorage

authentication

token

node.js

reactjs

use-state