路由更改时调用注销功能

Question

JWT accessToken过期后如何注销用户？

现在我使用withRouter 作为高阶组件（HOC）来检查路由变化，但它仅在用户单击浏览器的后退按钮时才有效。

我想在每次路线更改时检查路线更改，而不仅仅是返回按钮。例如，当用户点击返回主页链接时，我想检查令牌是否已过期，然后从本地存储中删除令牌。

AuthVerify.js

import React, { useEffect } from "react";
import { withRouter } from "react-router-dom";

const parseJwt = (token) => {
  try {
    return JSON.parse(atob(token.split(".")[1]));
  } catch (e) {
    return null;
  }
};

const AuthVerify = (props) => {
  console.log(props);
  useEffect(() => {
    props.history.listen(() => {
      const token = localStorage.getItem("accessToken");
      if (token) {
        const decodedJWT = parseJwt(token);

        if (decodedJWT.exp * 1000 < Date.now()) {
          console.log("expired");
          props.logOut();
        } else {
        }
      }
    });
  }, []);

  return <div></div>;
};

export default withRouter(AuthVerify);

App.js 的一部分

import { Fragment } from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";

import AuthVerify from "../src/utils/AuthVerify";

import "./App.css";

import Home from "./pages/Home";
import Signup from "../src/pages/Signup";
import Login from "../src/pages/Login";
import Test from "./pages/Test";

const logOut = () => {
  localStorage.removeItem("accessToken");
  localStorage.removeItem("refreshToken");
};

function App() {
  return (
    <Fragment>
      <div className="App">
        <BrowserRouter>
          <Switch>
            <Route exact path="/" component={Home} />
            <PrivateRoute exact path="/test" component={Test} />
            <Route exact path="/register" component={Signup} />
            <Route exact path="/login" component={Login} />
          </Switch>
        </BrowserRouter>
      </div>
      <AuthVerify logOut={logOut} />
    </Fragment>
  );
}

export default App;

Answer 1

我认为您的AuthVerify 没有问题，应该在位置更改时调用它。据我所知，您正在渲染AuthVerify 组件在路由器渲染正在更改的路由。 AuthVerify 组件需要在路由器中呈现，以便它使用相同的路由上下文来处理不断变化的路由。

function App() {
  return (
    <Fragment>
      <div className="App">
        <BrowserRouter>
          <Switch>
            <Route exact path="/" component={Home} />
            <PrivateRoute exact path="/test" component={Test} />
            <Route exact path="/register" component={Signup} />
            <Route exact path="/login" component={Login} />
          </Switch>
          <AuthVerify logOut={logOut} />
        </BrowserRouter>
      </div>
    </Fragment>
  );
}

我建议将AuthVerify 转换为自定义钩子，因为它不会呈现内容。

const useRouteListener = (cb) => {
  const history = useHistory();

  useEffect(() => {
    return history.listen(cb);
  }, [cb, history]);
}

移动 Router 以包装 App 组件并调用 useRouteListener 挂钩并传递您的注销令牌处理程序。 checkToken 这是一个回调，它会检查 JWT 是否过期并有条件地调用您的注销过程。

function App() {
  useRouteListener(checkToken);

  return (
    <Fragment>
      <div className="App">
        <Switch>
          <Route exact path="/" component={Home} />
          <PrivateRoute exact path="/test" component={Test} />
          <Route exact path="/register" component={Signup} />
          <Route exact path="/login" component={Login} />
        </Switch>
      </div>
    </Fragment>
  );
}

Answer 2

让我们使用 react-router-dom 的 useLocation 钩子

//import the useLocation
import { BrowserRouter, Switch, Route,useLocation } from "react-router-dom";

let location = useLocation()

useEffect(()=>{
//do whatever want to perform, just make sure it is in parent component
logOut()
},[location])


const logOut = () => {
  localStorage.removeItem("accessToken");
  localStorage.removeItem("refreshToken");
};

function App() {
  return (
    <Fragment>
      <div className="App">
        <BrowserRouter>
          <Switch>
            <Route exact path="/" component={Home} />
            <PrivateRoute exact path="/test" component={Test} />
            <Route exact path="/register" component={Signup} />
            <Route exact path="/login" component={Login} />
          </Switch>
        </BrowserRouter>
      </div>
      <AuthVerify logOut={logOut} />
    </Fragment>
  );
}