问使用React路由器v6和API调用保护路由
EN

Stack Overflow用户

提问于 2022-01-28 16:21:26

回答 1查看 1K关注 0票数 0

我使用ReactJS保护路由，我使用最新版本，甚至使用ReactJS路由器v6来保护我用jwt向API发送令牌的路由，其中它确认令牌是有效的，并且我可以访问其他路由。问题是，axios调用发生在javascript代码中的检查之后，它从未给出一个积极的结果。

App.js

import React, { Component } from "react";
import {
  BrowserRouter,
  Routes,
  Route,
  Link,
  Navigate
} from "react-router-dom";

import ReactDOM from "react-dom";
import axios from "axios";

import FormIngreso from "./components/pages/ingreso/FormIngreso";

import Home from "./components/pages/home/Home";

import ProtectedRoutes from "./components/ProtectedRoutes";

export default function App() {

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/ingreso" element={<FormIngreso />} />
        <Route element={<ProtectedRoutes />}>
          <Route path="/" element={<Home/>} />
        </Route>
      </Routes>
    </BrowserRouter>
  );

}

ProtectedRoutes.jsx

import { Navigate, Outlet } from "react-router-dom";
import axios from "axios";

const useAuth = () => {
  var url = window.$url_api + "/acceso/validar";
  var respuesta = false;

  var token = sessionStorage.getItem("react_session");

  if(token) {
    axios.post(url, {"token" : token})
      .then(res => {
        console.log(res);
        console.log(res.data);  
        var estado = res.data.estado;
        if(estado == 200) {
          console.log("noice");
          respuesta = true;
        }     
    }).catch(e => {
        console.log(e);
    });
  }

  return respuesta;
};

const ProtectedRoutes = () => {
  const isAuth = useAuth();
  console.log(isAuth);
  return isAuth ? <Outlet /> : <Navigate to="/ingreso" />;
};

export default ProtectedRoutes;

我该怎么解决我的问题？

reactjs

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-01-28 17:22:20

import { Navigate, Outlet } from "react-router-dom";
import axios from "axios";
import { useEffect, useState } from 'react';

//now useAuth is not a function anymore is a hook (leaves in the component lifecycle).
const useAuth = () => { 
  const [isAuth, setIsAuth] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      var token = sessionStorage.getItem("react_session");
      var url = window.$url_api + "/acceso/validar";

      if(!token) setIsAuth(false);

      try {
        const res = await axios.post(url, {"token" : token})
        console.log(res);    
        setIsAuth(false);

        if(estado == 200) {
          console.log("noice");
          setIsAuth(true);
        }     
      }
      catch(e) {
        console.log(e);
        setIsAuth(false);
      }
    };          

   };
   fetchData();
 }, []);      

  return isAuth;
};


const ProtectedRoutes = () => {
  const isAuth = useAuth();

  if (isAuth === null) // waiting..
    return null;

  return isAuth ? <Outlet /> : <Navigate to="/ingreso" />;
};


export default ProtectedRoutes;

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70896861

复制

相似问题

问使用React路由器v6和API调用保护路由
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用React路由器v6和API调用保护路由EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用React路由器v6和API调用保护路由
EN