JWT令牌過期后，如何在路由更改時注銷用戶？-有解無憂

我正在使用 Passport JWT 并且我想檢查 JWT 令牌的有效性以在它已經過期時執行注銷。我已經讓它在頁面重繪上作業，但不在路由更改上作業（例如，從導航欄）。每次重新渲染任何路由組件時，我都需要找到一種方法來檢查它，而且我知道我很可能不需要在每個組件上都這樣做。我只是不知道如何。

這是用于頁面重繪的代碼：

快遞

認證.js

router.route("/").get((req, res) => {
  passport.authenticate("jwt", { session: false }, (err, user, info) => {
    if (!user) {
      res.status(401);
      res.send("Unauthorized")
    }
  })(req, res);
});

module.exports = router;

在反應

授權背景關系.js

export const AuthContext = createContext();

function AuthProvider({ children }) {
  const [isLoaded, setIsLoaded] = usePersistedState(false, "loaded");
  const [user, setUser] = usePersistedState(null, "username");
  const [isAuthenticated, setIsAuthenticated] = usePersistedState(
    false,
    "auth"
  );

  useEffect(() => {
    axios
      .get("/authenticated")
      .then((response) => {
        return;
      })
      .catch((error) => {
        setUser("");
        setIsAuthenticated(false);
        setIsLoaded(true);
      });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <div>
      {!isLoaded ? (
        <h3>Loading...</h3>
      ) : (
        <AuthContext.Provider
          value={{ user, setUser, isAuthenticated, setIsAuthenticated }}
        >
          {children}
        </AuthContext.Provider>
      )}
    </div>
  );
}

export default AuthProvider;

索引.js

ReactDOM.render(
  <AuthProvider>
    <App />
  </AuthProvider>,
  document.getElementById("root")
);

更新

我試圖通過useEffect在PrivateOutlet.js處理私有路由的my 上添加這個函式來完成它，但它沒有用：

function PrivateOutlet() {
  const authContext = useContext(AuthContext);

  const location = useLocation();

  useEffect(() => {
    axios
      .get("/authenticated")
      .then((response) => {
        return;
      })
      .catch((err) => {
        authContext.setIsAuthenticated(false);
        authContext.setUser("");
      });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [location]);

  return authContext.isAuthenticated ? (
    <Outlet />
  ) : (
    <Navigate to="/login" replace state={{ path: location.pathname }} />
  );
}

export default PrivateOutlet;

uj5u.com熱心網友回復：

回應不特定于任何平臺/語言。通常，身份驗證提供程式/服務會向客戶端發出令牌。用于在資源服務器驗證后訪問私有資源的令牌。當您使用JWT token, 因此資源服務器/服務可以驗證令牌而無需與身份驗證服務交談或不執行資料庫查找。您的服務器端代碼始終需要使用傳入的請求驗證令牌，您可以通過為受保護的請求創建攔截器來實作這一點。簡而言之，您可以在需要時呼叫來自客戶端的呼叫來驗證令牌。

uj5u.com熱心網友回復：

它可能是一個套接字呼叫，用于通過包裝器組件進行檢查。如果socket回傳false，則history.push他到不需要登錄的頁面

uj5u.com熱心網友回復：

原始問題的“更新”部分中列出的方法是正確的，但是我的代碼中有一些警告阻止它正常作業。

將其移動到后，我忘記洗掉useEffect()from ，并且我還修改了依賴項陣列以包含而不是僅包含：AuthContext.jsPrivateOutlet.jslocation.pathnamelocation

PrivateOutlet.js

function PrivateOutlet() {
  const authContext = useContext(AuthContext);

  const location = useLocation();

  useEffect(() => {
    axios
      .get("/authenticated")
      .then((response) => {
        return;
      })
      .catch((err) => {
        authContext.setIsAuthenticated(false);
        authContext.setUser("");
      });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [location.pathname]);

  return authContext.isAuthenticated ? (
    <Outlet />
  ) : (
    <Navigate to="/login" replace state={{ path: location.pathname }} />
  );
}

export default PrivateOutlet;

這是一個很小的變化，可能根本不會干擾任何事情，但是在authenticated.js我的 Express 服務器上，我剛剛從使用自定義回呼回傳到標準 Passport 回呼，允許它自己處理未經授權的呼叫：

認證.js

router
  .route("/")
  .get(passport.authenticate("jwt", { session: false }), (req, res) => {
    //do some stuff
    res.json();
  });

module.exports = router;

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/394335.html

標籤：节点.js 反应验证路线 jwt

上一篇：如何在Linux上通過本地網路遠程執行帶有身份驗證的預先指定的命令？

下一篇：在DJango表單中手動添加欄位