리액션 + 라우팅 + 보안

리액션 + 라우팅 + 보안

React and react-router로 웹 애플리케이션을 만들고 있으며 기존 외부 액세스 관리 인프라(OpenAM)로 React 애플리케이션의 일부 경로를 보호하고 싶다.

나는 http://web.example.com:8080/myapp/#/user-profile url을 보호하고 싶다. 이는 로그인한 사용자만이 이 경로에 액세스할 수 있다는 것을 의미한다.

나는 공공 루트가 있고 어떤 사용자라도 http://web.example.com:8080/myapp/#/welcome과 같은 루트를 열 수 있다.

액세스 관리는 URL을 보호하며, 사용자가 보호된 URL을 열고자 할 경우 액세스 관리자에 의해 로그인 양식이 표시되고 로그인이 성공하면 원래 요청된 URL이 표시된다.

여기서 문제는 react-router가 '#' 문자 뒤에 라우팅 정보를 추가하며, 위에서 언급한 두 개의 서로 다른 URL은 동일한 웹 리소스(/myapp)를 참조하기 때문에 액세스 관리자의 관점에서 동일하다는 것이다.이 두 URL 사이의 차이는 '#' 문자 뒤에 나타난다.

이런 '#'자 없는 진짜 URL이 필요해

• http://web.example.com:8080/myapp/user-profile
• http://web.example.com:8080/myapp/welcome

React를 사용하여 실제 URL 매핑을 사용하는 방법은?실제 URL 경로를 반응하여 사용하는 방법이나 해결 방법이 있으십니까?

고마워요.

업데이트: 이게 내 코드야.웹 브라우저의 URL은 보기 좋지만 "정보가 경로와 일치하지 않는다"는 오류가 발생한다.요청된 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>
)

당신은 사용할 수 있다.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>
)

참조URL: https://stackoverflow.com/questions/38314807/react-routing-security