Question

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

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

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

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

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

我需要找到一种方法，以防止身份服务器重定向回我的应用程序时将状态重置为初始值。我不确定如何处理。

这是我的代码供参考。

Main.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;

Home.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;

Button.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

Answer 1

使用浏览器本地存储可以提供持久存储，因为您的React应用每次重定向都会重新加载，使用本地存储的值作为状态值。

有关更多信息： https://www.robinwieruch.de/local-storage-react

重定向到外部网站后如何重定向回应用程序

1 个答案: