리액트 라우터의 루트에 대한 접근을 제한하는 방법
리액트 라우터의 특정 루트에 대한 접근을 제한하는 방법을 알고 있는 사람이 있습니까?특정 루트에 대한 접근을 허용하기 전에 사용자가 로그인하고 있는지 확인하고 싶습니다.간단할 줄 알았는데 의사들께서 방법을 잘 모르시더라고요
이 설정을 제가 정의해야 하는 위치에 해야 하는 건가요?<Route>컴포넌트 또는 컴포넌트 핸들러 내에서 취급해야 합니까?
<Route handler={App} path="/">
<NotFoundRoute handler={NotFound} name="not-found"/>
<DefaultRoute handler={Login} name="login"/>
<Route handler={Todos} name="todos"/> {/* I want this to be restricted */}
</Route>
갱신(2019년 8월 16일)
react-router v4와 react hooks 사용에서는 이 점이 조금 다릅니다.첫 번째로,App.js.
export default function App() {
const [isAuthenticated, userHasAuthenticated] = useState(false);
useEffect(() => {
onLoad();
}, []);
async function onLoad() {
try {
await Auth.currentSession();
userHasAuthenticated(true);
} catch (e) {
alert(e);
}
}
return (
<div className="App container">
<h1>Welcome to my app</h1>
<Switch>
<UnauthenticatedRoute
path="/login"
component={Login}
appProps={{ isAuthenticated }}
/>
<AuthenticatedRoute
path="/todos"
component={Todos}
appProps={{ isAuthenticated }}
/>
<Route component={NotFound} />
</Switch>
</div>
);
}
사용하고 있습니다.Auth라이브러리에서 사용자가 현재 인증되었는지 확인합니다.이것을 인증 확인 기능으로 바꿉니다.그 경우는, 다음의 설정을 실시합니다.isAuthenticated에 깃발을 올리다.true앱이 처음 로딩될 때 이 작업을 수행합니다.또한 인증 검사 실행 중에 앱에 로딩 기호를 추가하고 싶기 때문에 페이지를 새로 고칠 때마다 로그인 페이지를 깜박이지 않습니다.
그런 다음 깃발을 우리 노선에 전달합니다.두 가지 유형의 루트를 만듭니다.AuthenticatedRoute그리고.UnauthenticatedRoute.
그AuthenticatedRoute.js이렇게 생겼어요.
export default function AuthenticatedRoute({ component: C, appProps, ...rest }) {
return (
<Route
{...rest}
render={props =>
appProps.isAuthenticated
? <C {...props} {...appProps} />
: <Redirect
to={`/login?redirect=${props.location.pathname}${props.location.search}`}
/>}
/>
);
}
이 체크는isAuthenticated로 설정되어 있다.true이 경우 원하는 컴포넌트를 렌더링합니다.그렇지 않으면 로그인 페이지로 리디렉션됩니다.
그UnauthenticatedRoute.js반면에 이렇게 생겼죠.
export default ({ component: C, appProps, ...rest }) =>
<Route
{...rest}
render={props =>
!appProps.isAuthenticated
? <C {...props} {...appProps} />
: <Redirect to="/" />}
/>;
이 경우,isAuthenticated로 설정되어 있다.false원하는 컴포넌트를 렌더링합니다.true로 설정하면 홈페이지로 이동합니다.
자세한 버전은 https://serverless-stack.com/chapters/create-a-route-that-redirects.html에서 확인할 수 있습니다.
이전 버전
인정된 답변은 맞지만 React 팀은 Mixins가 유해하다고 간주합니다(https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html)).
만약 누군가가 이 질문을 발견하고 권장되는 방법을 찾고 있다면, 저는 Mixins 대신 Higher Order Components를 사용하는 것을 추천합니다.
다음으로 사용자가 로그인하고 있는지 여부를 확인하는HOC의 예를 나타냅니다.사용자가 로그인하지 않은 경우 로그인 페이지로 리디렉션됩니다.이 컴포넌트에는isLoggedIn이는 기본적으로 사용자의 로그인 여부를 나타내기 위해 응용 프로그램에서 저장할 수 있는 플래그입니다.
import React from 'react';
import { withRouter } from 'react-router';
export default function requireAuth(Component) {
class AuthenticatedComponent extends React.Component {
componentWillMount() {
this.checkAuth();
}
checkAuth() {
if ( ! this.props.isLoggedIn) {
const location = this.props.location;
const redirect = location.pathname + location.search;
this.props.router.push(`/login?redirect=${redirect}`);
}
}
render() {
return this.props.isLoggedIn
? <Component { ...this.props } />
: null;
}
}
return withRouter(AuthenticatedComponent);
}
이 HOC를 사용하려면 루트를 감싸기만 하면 됩니다.예를 들어 다음과 같습니다.
<Route handler={requireAuth(Todos)} name="todos"/>
자세한 튜토리얼은, 이것과 그 외의 몇개의 토픽에 대해 설명합니다.https://serverless-stack.com/chapters/create-a-hoc-that-checks-auth.html
React Router 4 의 문서에는, 이 예(지금?)가 있습니다.
import { Route, Redirect } from 'react-router'
<Route exact path="/" render={() => (
loggedIn ? (
<Redirect to="/dashboard"/>
) : (
<PublicHomePage/>
)
)}/>
react-router는 라우터에 선언적인 접근을 권장하고 있습니다.라우터를 가능한 한 무음 상태로 만들어 컴포넌트에 라우팅 로직을 삽입하지 않도록 해야 합니다.
안 된다고 요.loggedIn : 추가) :
const DumbRouter = ({ loggedIn }) => (
<Router history={history}>
<Switch>
{[
!loggedIn && LoggedOutRoutes,
loggedIn && LoggedInRouter,
<Route component={404Route} />
]}
</Switch>
</Router>
);
const LoggedInRoutes = [
<Route path="/" component={Profile} />
];
const LoggedOutRoutes = [
<Route path="/" component={Login} />
];
전체 애플리케이션에서 인증을 사용하려면 일부 데이터(예: 토큰)를 애플리케이션 전체에 저장해야 합니다.의 React 의 React mixin을 할 수 .$auth 믹스인 할 수 .이 오브젝트는 이들 2개의 믹스인 이외에서는 사용할 수 없습니다.예를 들어 다음과 같습니다.
define('userManagement', function() {
'use strict';
var $auth = {
isLoggedIn: function () {
// return something, e.g. using server-stored data
}
};
return {
Authenticator: {
login: function(username, password) {
// modify $auth object, or call server, or both
}
},
NeedsAuthenticatedUser: {
statics: {
willTransitionTo: function (transition) {
if (!$auth.isLoggedIn()) {
transition.abort();
}
}
}
}
};
});
그냥 요.Authenticator 화면,팝업 와 콜을 실시합니다.this.login필요한 데이터가 모두 있을 때 기능을 합니다.
은 ''를 '컴포넌트'에 입니다.NeedsAuthenticatedUser 한 각 mixin과 . 인증된 사용자를 필요로 하는 각 컴포넌트는 다음과 같아야 합니다.
var um = require('userManagement');
var ProtectedComponent = React.createClass({
mixins: [um.NeedsAuthenticatedUser]
// ...
}
:NeedsAuthenticatedUser리액트라우터 API)를 사용합니다.willTransitionTo ★★★★★★★★★★★★★★★★★」transition.abort()를 참조해 주세요.
HOC 를 사용할 수 있습니다.auth 는 변수입니다.값 true 또는 false means(인가)를 변경할 수 있습니다.
<Route path="/login" component={SignIn} />
<Route path="/posts" render = {() => (auth ? (<Post />) : (<Redirect to="/login" />))}/>
private-route.tsx
import {Redirect, Route, RouteProps} from 'react-router';
import * as React from 'react';
interface PrivateRouteProps extends RouteProps {
/**
* '/login' for example.
*/
redirectTo: string;
/**
* If true, won't redirect.
* We are using a function instead of a bool, a bool does not seem to be updated
* after having successfully authenticated.
*/
isLogged: () => boolean;
}
export function PrivateRoute(props: PrivateRouteProps) {
// `component: Component` is not typing, it assign the value to a new variable.
let { isLogged, redirectTo, component: Component, ...rest }: any = props;
// error: JSX type element Component does not have call signature or ... AVOIDED BY ADDING ANY, still work,
// and did not find a proper way to fix it.
return <Route {...rest} render={(props) => (
isLogged()
? <Component {...props}/>
: <Redirect to={{
pathname: redirectTo,
state: { from: props.location }
}} />
)} />;
}
사용방법:
<PrivateRoute exact={true}
path="/admin/"
redirectTo={'/admin/login'}
isLogged={this.loginService.isLogged}
component={AdminDashboardPage}/>
<Route path="/admin/login/" component={AdminLoginPage}/>
https://tylermcginnis.com/react-router-protected-routes-authentication/를 기반으로 합니다.
다음과 같이 인증을 확인하기 전에 구성 요소를 렌더링하지 않아도 됩니다.
import { useState, useEffect, useRef } from 'react';
import { useHistory } from 'react-router-dom';
const Route = () => {
const [loading, sertLoading] = useState(true);
const history = useHistory();
const ref = useRef<Function>({});
// must use ref!
ref.current.routeGuard = () => {
const authenticationHandler = (): boolean => {
// do authentication here
}
sertLoading(true);
const go = authenticationHandler();
if (go === false) {
history.goBack();
}
sertLoading(false);
}
useEffect(() => {
ref.current.routeGuard();
history.listen(() => {
ref.current.routeGuard();
});
}, []);
return (
<>
{!loading && <YourRouteComponent />}
</>
)
};
간단하게 말하면, 「」입니다.yarn add react-routers에 소품이 beforeEach,beforeRouteVue 루트
일반적으로 로그인한 사용자에게 토큰이 부여되며 서버와의 통신에 이 토큰을 사용합니다.일반적으로 루트 페이지를 정의하고 그 페이지 위에 구축합니다.이 루트 페이지는 현지화, 인증 및 기타 설정을 수행합니다.
여기 예가 있어요.
Routes = (
<Route path="/" handler={Root}>
<Route name="login" handler={Login} />
<Route name="forget" handler={ForgetPassword} />
<Route handler={Main} >
<Route name="overview" handler={Overview} />
<Route name="profile" handler={Profile} />
<DefaultRoute handler={Overview} />
</Route>
<DefaultRoute handler={Login} />
<NotFoundRoute handler={NotFound} />
</Route>
);
루트 페이지에서 토큰 늘을 확인하거나 토큰을 서버에서 인증하여 사용자가 유효한 로그인 여부를 확인합니다.
이것이 도움이 되기를 바란다:)
언급URL : https://stackoverflow.com/questions/31084779/how-to-restrict-access-to-routes-in-react-router
'programing' 카테고리의 다른 글
| Jeest expect.any()가 예상대로 작동하지 않습니다. (0) | 2023.03.05 |
|---|---|
| joke console.log 테스트 방법 (0) | 2023.02.23 |
| PHP의 JSON POST에서 HTTP 요청 본문을 읽는 동안 문제가 발생했습니다. (0) | 2023.02.23 |
| react-testing-library 사용 시 "myText" 오류가 있는 요소를 찾을 수 없습니다. (0) | 2023.02.23 |
| YAML 대신 JSON을 사용하여 ActiveRecord 시리얼화 (0) | 2023.02.23 |