reactjs:global-okta-auth-helper函数

nimxete2 于 2021-09-13 发布在 Java

关注(0)|答案(1)|浏览(242)

我使用okta对我的react web应用进行了身份验证，但是如果用户未经身份验证或令牌过期，则它会将用户重定向到 /login 页
第1.js页：

import React, { useState, useEffect } from "react";
import { useOktaAuth } from "@okta/okta-react";
import { Redirect, useHistory } from "react-router-dom";

const { authState } = useOktaAuth();
const history = useHistory();

useEffect(() => {
    if (!authState) {
      history.push("/login");
    }
});

是否有一种方法可以将上面的代码包含到一个函数中，然后导入到每个不同的页面[#].js，而不是将上面的代码包含在每个文件中？
我只是在尝试重构，并确保我的代码在运行时是整洁的，但不确定解决这个问题的最佳方法。
蒂亚！

JavaScript reactjs okta-signin-widget

来源：https://stackoverflow.com/questions/68344871/reactjs-global-okta-auth-helper-function

1条答案

按热度按时间

aiazj4mn1#

您可以将需要用户登录的所有组件 Package 在一个组件中，并保护路由。
用户登录后，在localstorage或redux中设置令牌（您需要将其持久化）。指定要通过isloggedin组件的路由，以便只有用户登录时才能访问这些路由，否则将重定向到登录页面
例子

import React from "react";
import { Redirect, Route } from "react-router-dom";

function IsLoggedIn({ Component, ...props }) {

  const isAuthenticated = localStorage.getItem("isAuthenticated");

  return (
    <Route {...props}
      render={(props) =>
        isAuthenticated ? <Component {...props} /> : <Redirect to="/login" />
      }
    />
  );
}

export default IsLoggedIn;

在app.js中

function App(){
  return(
    <BrowserRouter>
       <Route exact path="/login" component={Login} />
       <IsLoggedIn exact path="/" component={Page1} />
    </BrowserRouter>
  )
}

赞(0）回复(0）举报 2021-09-13

我来回答

reactjs:global-okta-auth-helper函数

1条答案

相关问题

热门标签

最新问答