reactjs - 重定向到外部网站后如何保持设置状态，然后重定向回响应应用程序

问题描述

我是新手，正在构建一个可以连接到两个 API 之一的应用程序。这些 API 都使用“授权码”流程，它将用户重定向到身份服务器，用户登录到身份服务器并允许我的 react 应用程序访问他们存储在数据库中的数据，然后用户被重定向回我的应用程序。

所以我的应用程序有一个带有 2 个按钮的主页，按钮 1 和按钮 2。我正在使用主页状态来存储单击了哪个按钮的值以及用户想要使用哪个 API - 例如：如果单击了 button1：this.setState({page1: true, page2: false})

然后用户被重定向到身份服务器：window.location = "https://identityserverurl"

用户登录到身份服务器网站，单击“允许”，然后被重定向回我的应用程序。然后应该发生什么基于重定向到身份服务器之前设置的状态，显示不同的组件而不是主页 - （我为此使用条件语句）。

问题是当用户从 API 身份服务器重定向回我的应用程序时，它会加载主页而不是其他页面之一，因为当身份服务器将用户重定向回我时，状态正在重置为其初始值应用程序。

当身份服务器重定向回我的应用程序时，我需要找到一种方法来防止状态被重置回初始值。我不知道如何处理这个。

这是我的代码供参考。

主.js

import React, { Component } from 'react';
import Home from './Home.js';
import Page1 from './Page1.js';
import Page2 from './Page2.js'

class Main extends Component {
    constructor(props) {
      super(props);
      this.state = {page1: false, page2: false};
      this.handleClick = this.handleClick.bind(this);
    }

    hanldeRedirect() {
      window.location = "https://identityserverurl.com";
    }

    handleClick(arg) {
      if(arg === "page1") {
        this.setState({page1: true, page2: false});
        this.hanldeRedirect();
      }
      if(arg === "page2") {
        this.setState({page1: false, page2: true});
        this.hanldeRedirect();
      }
      if(arg === "home"){
        this.setState({page1: false, page2: false})
      }
    }

    render() {
      const isPage1 = this.state.page1;
      const isPage2 = this.state.page2;
      if(!isPage1 && !isPage2) {
        return(<Home onPage1Event={() => this.handleClick("page1")} page1Value="page1" onPage2Event={() => this.handleClick("page2")} page2Value="page2" />)
      }
      else {
        if(isPage1) {
          return(<Page1 />)
        }
        else {
          return(<Page2 />)
        }
      }
    }
  }

  export default Main;

主页.js

import React, { Component } from 'react';
import Button from './Button.js';

class Home extends Component {
    render() {
      return(
        <div>
          <Button onEvent={(event)=> this.props.onPage1Event(event)} btnValue={this.props.page1Value}>{this.props.page1Value}</Button>
          <br/>
          <Button onEvent={(event)=> this.props.onPage2Event(event)} btnValue={this.props.page2Value}>{this.props.page2Value}</Button>
        </div>
      )
    }
  }

  export default Home;

Page1.js

import React from 'react';

const Page1 = () => {
    return(
        <div>
            <h1>Page1</h1>
        </div>
    )
}

export default Page1;

Page2.js

import React from 'react';

const Page2 = () => {
    return(
        <div>
            <h1>Page2</h1>
        </div>
    )
}

export default Page2;

按钮.js

import React, { Component } from 'react';

class Button extends Component {
    render() {
      return(
        <button onClick={() => this.props.onEvent()} value={this.props.btnValue}>{this.props.btnValue}</button>
      )
    }
  }

  export default Button

标签： reactjs

reactjs - 重定向到外部网站后如何保持设置状态，然后重定向回响应应用程序

问题描述

解决方案

推荐阅读