Question

我在react项目中实现了私有路由，但是我没有找到导致身份验证失败的错误。重定向不起作用，调试未输入estaAutenticado函数。

令牌是从sessionStorage中检索的常量。

端点/ usuario通过JWT令牌进行验证。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Routes from './servicos/Rotas';

ReactDOM.render(<Routes/>, document.getElementById('root'));

Rotas.js

import React from "react";
import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";
import { estaAutenticado } from "./Autenticacao";
import App from '../App';
import Login from '../Login';
import SelecionarFiliais from '../SelecionarFiliais';

export const rotas = [
  {
    path: "/login",
    name: "Login",
    icon: null,
    component: Login,
    private: false,
    exact: false
  },
  {
    path: "/selecionar_filiais",
    name: "Login",
    icon: null,
    component: SelecionarFiliais,
    private: true,
    exact: false
  },
  {
    path: "/",
    name: "Dashboard",
    icon: null,
    component: App,
    private: true,
    exact: true
  }
];

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest} render={props =>
        estaAutenticado() ? (
        <Component {...props} />
      ) : (
        <Redirect to={{ pathname: "/login", state: { from: props.location } }} />
      )
    }
  />
);

const Routes = () => (
    <BrowserRouter>
        <Switch>
          {rotas.map((e) => (
            e.private ? <Route key={e.path} exact={e.exact} path={e.path} component={e.component}/> : <PrivateRoute key={e.path} exact={e.exact} path={e.path} component={e.component}/>
          ))}
        </Switch>
    </BrowserRouter>
);

export default Routes;

功能estaAutenticado（）

export const estaAutenticado = async () => {
    let result = false
    if (token !== null){
        result = await API.post('/usuario')
        .then(function(response) {
            return true
        })
        .catch(function(error){
            return false
        });
        return result
    }
    return result
};

请帮助！！！谢谢

Answer 1

result = await API.post('/usuario')
        .then(function(response) {
            return true
        })
        .catch(function(error){
            return false
        });
        return result

应该是

try {
 result = await API.post('/usuario')
 return result
} catch(e) {
 return false
}

编辑：

如果函数是反向的，也可以进行映射：

{rotas.map((e) => (
            e.private ? <Route key={e.path} exact={e.exact} path={e.path} component={e.component}/> : <PrivateRoute key={e.path} exact={e.exact} path={e.path} component={e.component}/>
          ))}

应该是

{rotas.map((e) => (
            !e.private ? <Route key={e.path} exact={e.exact} path={e.path} component={e.component}/> : <PrivateRoute key={e.path} exact={e.exact} path={e.path} component={e.component}/>
          ))}

如果它是私有的，则渲染PrivateRoute。

ReactJS身份验证不起作用，重定向到登录页面失败

1 个答案: