反应+路由+安全

Question

我正在使用 React 和 react-router 构建一个 Web 应用程序，我想使用现有的外部访问管理基础设施 (OpenAM) 来保护我的 React 应用程序的一些路由。

我想保护 http://web.example.com:8080/myapp/#/user-profile url 这意味着只有登录用户才能访问此路由。

我还有其他一些路由 public 并且任何用户都可以打开它们，例如 http://web.example.com:8080/myapp/#/welcome.

访问管理保护 url，如果用户想要打开受保护的 url，则访问管理会显示登录表单，成功登录后，原始请求 url 将显示。

这里的问题是 react-router 在 '#' 字符后添加了路由信息，上面提到的两个不同的 urls 从访问管理器的角度来看是相同的，因为它们指的是相同的网络资源 (/myapp)。这两个 url 之间的差异出现在 '#' 字符之后。

我需要像这样没有“#”字符的真实 urls:

有没有办法在 React 中使用真正的 url 映射？你们有什么想法或解决方法如何使用真实的 url 路由进行反应吗？

谢谢。

更新： 这是我的代码。 Web 浏览器中的 url 看起来不错，但我收到 "about did not match any routes" 错误。要求url：http://web.example.com:8080/myapp/about

import {Router, Route, IndexRoute, useRouterHistory} from 'react-router';
import {createHistory} from 'history';    

const browserHistory = useRouterHistory(createHistory) ({
   basename: '/myapp/'
});

ReactDOM.render(
   <Router history={browserHistory}>
      <Route path="/" component={MainLayout}>
         <IndexRoute component={Home} />
         <Route path="about" component={About} />
      </Route>
   </Router>
)

Answer 1

您可以按照评论中的建议使用 browserHistory 来摆脱 # 符号。如果你希望你的反应应用程序的根是 /myapp/ 而不是 / 你可以尝试：

import {Router, Route, useRouterHistory} from 'react-router';
import {createHistory} from 'history';    

const browserHistory = useRouterHistory(createHistory)({basename: '/myapp/'});

ReactDOM.render(
  <Router history={browserHistory}>
    ...
  </Router>
)

反应+路由+安全

react + routing + security

security

openam

reactjs

react-router