NGINX设置一个接受查询参数的React路由

jexiocij  于 2023-06-21  发布在  Nginx
关注(0)|答案(1)|浏览(139)

我是ReactJs和Nginx的新手,但我想实现的是
在我的reactjs中,有一个按钮将重定向到SSO URL,并将ssotarget作为查询参数。ssotarget是我的路由中的一个react路由。

Redirect URL:http://sso-url.com/login?ssotarget=http://my-react/my-route

我也有一个nginx服务器为react js服务。
身份验证成功后,SSO服务器(仍在同一个浏览器选项卡中)将转发到ssotargeturl。
我如何编码或设置当SSO目标重定向到我的网站(见下文)时,它将被react路由捕获并继续解码响应?

http://my-react/my-route?response=somebase64string
kzipqqlq

kzipqqlq1#

试试这个
1.配置SSO服务器:确保SSO服务器设置为在成功验证后使用适当的查询参数将用户重定向回React应用程序的URL。将ssotarget查询参数设置为目标URL,包括路由和需要传递的任何其他参数(例如,http://my-react/my-route?response=somebase64string)。

  1. React路由器设置:在你的React App中,确保你已经使用React Router设置了必要的路由。定义一个匹配所需路径的路由[在您的示例中为/my-route],并呈现负责解码响应的组件。
    1.解码响应:在对应于/my-route路由的组件中,您可以使用React Router中的useLocation钩子访问查询参数。从location对象中提取响应查询参数的值。对接收到的响应执行任何所需的解码或处理。
    Eg代码:
import { BrowserRouter as Router, Route, useLocation } from 'react-router-dom';

const RouteComponent = () => {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  const response = queryParams.get('response');

  // Perform decoding or any further processing on the response

  return (
    <div>
      <h1>Route Component</h1>
      {/* Render the rest of your component */}
    </div>
  );
};

const App = () => {
  return (
    <Router>
      <Route path="/my-route" component={RouteComponent} />
      {/* Define other routes and components */}
    </Router>
  );
};

export default App;

相关问题