如何处理到客户端React App的外部重定向?

我正在构建一个使用True Layer开放银行API的网络应用。该应用程序具有使用React路由器的React前端以及Express和Nodejs后端。目前,我正在使用react build脚本来提供静态文件:

const app = express();

app.use(cors());
app.use(express.json());

app.use(express.static('../client/build'));
app.get('*',(req,res) => {
    res.sendFile('index.html',{root: path.join(__dirname,'../client/build/')});
});

const PORT = process.env.PORT || 3001;
app.listen(PORT,() => {
    console.log("Server listening on port: ",PORT);
});

// The API routes are imported below

此解决方案效果很好,但是当用户重定向到True Layer的身份验证页面时,将生成OAuth代码并将其作为url查询传递回客户端上的路由。问题是,当True Layer将用户重定向回我的应用程序时,服务器将解释该URL,而不是响应路由器/浏览器解释该URL,因此它返回cannot GET /myaccounts。我已经研究过使用类似Next.js的库为React客户端使用服务器端渲染,但是我想知道是否有一种方法可以不必显着重构我的代码。

我的React Router设置:

class App extends Component {
    render() {
        return (
            <Router>
                <Route name="Landing" path="/" exact component={Login} />
                <Route name="Login" path="/login" exact component={Login} />
                <Route name="Myaccounts" path="/myaccounts" exact component={Home} />
            </Router>
        );
    }
}

/myaccounts路由呈现Home组件/页面,其中提取了code参数:qs.parse(props.location.search)['?code'],并发送到我的服务器以完成OAuth流程。

任何帮助将不胜感激。

ygzboy 回答:如何处理到客户端React App的外部重定向?

  

问题在于,当True Layer将用户重定向回我的应用程序时,URL由服务器而不是React路由器/浏览器解释,因此它返回的内容无法获取/ myAccounts

会发生什么:
路径/myAccounts是您的React SPA的内部路径,该路径显示MyAccounts组件呈现的内部SPA页面。 Web服务器不知道此页面,并返回“无法获取/ myAccounts”。此网络服务器行为不正确,不是因为该网络服务器不支持True Layer / OAuth,而是因为该网络服务器不正确地支持SPA。

会发生什么:
Web服务器应通过实现后备行为来支持SPA,这仅意味着服务器将对未知页面的请求重定向到SPA登陆页面。例如,使用historyApiFallback在webpack-dev-server中启用了此行为,而Chris是专门为支持SPA而存在的。

任何SPA都需要回退行为,因为用户可以在导航栏中看到任何内部页面的路径,并且可以手动重新键入它并按Enter或刷新浏览器。在这两种情况下,Web服务器都会收到对其不知道的内部SPA页面的请求,并且响应404错误对于用户来说并不好。

在Express中实施后备广告后,您可以向请求中添加一条数据,以将其重定向到登录页面。这样您的Landing组件将看到此可选部分,并在内部(网络服务器不知道)重定向到MyAccounts组件。

,

P.S。
为了满足登录要求,需要修改逻辑。
在这种情况下,首选(逻辑上更简单/更清晰)的选项是具有2个SPA:用于登录的SPA,针对应用程序其余部分的SPA。但是我知道这将意味着对现有应用程序进行更多更改,这就是为什么您只希望更改Express方面的原因。可以做到,但是逻辑变得更加复杂。

客户端
在唯一的SPA的唯一入口中,您可以拥有:

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/login" component={Login} />
  <Route path="/myaccount" component={either Login or maybe MyAccount} />
  <Route component={Home} />
</Switch>

Home组件应验证客户端已登录(例如,通过在成功登录后检查Express或外部云服务器设置的cookie),以及是否未在内部(history.push)重定向到{{ 1}}。 /login组件应以相同的方式检查客户端是否已通过身份验证,以及是否在内部重定向至Login,例如到'/'组件。

表达方面的逻辑

  • Home-提供/(React生成的唯一.html文件,因为您有一个SPA),最终到达Router,Router依次呈现index.html组件由于第一个Home

  • <Route> –服务/index。由于第四个index.html,路由器将渲染Home组件。

  • <Route> –服务/login。这是一个后备(例如,已经登录的用户可以手动键入此路径)。由于第二个index.html

  • ,路由器将渲染Login组件
  • <Route> –服务/myaccount。由于第三个index.html,路由器将渲染Login组件。该组件应该能够获得<Route>

  • 一个看起来并不恶意的未知页面。这可能是用户重新输入SPA的某些内部页面的一些内部路径。后退到'/'以显示?code=123bac...组件。

本文链接:https://www.f2er.com/3163454.html

大家都在问