React 내부 자습서(3)

Vue.전성기에는 내부 구성원을 위한 읽기 간단한 강좌가 있었다.

시리즈

1: 간단한create-react-app 사용 방법 및 파일 설정

2: 간단한 페이지 만들기 (일반 부품화 포함) 및react-routern 루트

3: 빠른 인증 기능 추가(로그인 로그아웃)

3 개요

로그인 로그아웃 기능을 설치하고 로그인하지 않으면 사이트를 볼 수 없음

회원 페이지와 관리 화면 등에서 사용할 생각

인증 처리는 임시 처리입니다.

localStorage에 login=true 로고가 있는지 확인

로그인 페이지 추가

먼저 로그인 페이지를 만듭니다.
이번에는 외관만 만들고 단추를 누르면 localStorage에 login=true 정보를 써서 홈페이지로 바꿉니다.
Login.js

import React from 'react';
import { withRouter } from 'react-router-dom';

class Login extends React.Component {

    handleLogin = () => {
        localStorage.setItem("login", "true");
        this.props.history.push("/");
    }

    render() {
        return (
            <div style={{ background: "#eee", height: 200, width: 300, margin: '100px auto', textAlign: 'center', padding: 30 }}>
                <h3>ログイン</h3>
                ID: <input type="text" style={{ marginTop: 10 }} /><br />
                PW: <input tppe="text" style={{ marginTop: 10 }} /><br />
                <button style={{ marginTop: 10 }} onClick={() => this.handleLogin()}>ログイン</button>
            </div>
        );
    }
}

export default withRouter(Login);

인증 기능 설치 (가칭)

그런 다음 검증 기능을 구현합니다.localStorage에login=true의 로고 정보가 있으면 홈페이지를 표시하고, 없으면/login으로 방향을 바꿉니다.
Auth.js

import React from 'react';
import { Redirect } from 'react-router-dom';

class Auth extends React.Component {
    render() {

        let loginStatus = localStorage.getItem("login");

        if (loginStatus === "true") {
            return this.props.children;
        } else {
            return <Redirect to="/login" />
        }
    }
}

export default Auth;

로그아웃 기능 추가

로그아웃 기능이 없기 때문에 내비게이션에 로그아웃 단추를 추가하여 로그아웃 기능을 실현합니다.
로그아웃은 localStorage의 로고 정보를 login=false로 설정하여 이루어집니다.
Nav.js

import React from 'react';
import { NavLink, withRouter } from 'react-router-dom';

class Nav extends React.Component {

+    handleLogout = () => {
+        localStorage.setItem("login","false");
+        this.props.history.push("/");
+    }

    render() {
        return (
            <nav style={{ background: "#666" }}>
                <ul style={{ display: 'flex', listStyle: 'none' }}>
                    <li style={{ margin: 10 }}><NavLink exact to="/" style={{ color: "#fff", textDecoration: 'none' }} activeStyle={{ color: '#aaf' }}>Home</NavLink></li>
                    <li style={{ margin: 10 }}><NavLink exact to="/about" style={{ color: "#fff", textDecoration: 'none' }} activeStyle={{ color: '#aaf' }}>About</NavLink></li>
+                    <li style={{ margin: 10 }}><span style={{ color: "#fff", cursor: 'pointer' }} onClick={() => this.handleLogout()}>Logout</span></li>
                </ul>
            </nav>
        );
    }
}

export default withRouter(Nav);

라우팅 설정

그럼, App.js의 설명을 변경합니다.
에 둘러싸인 부분을 인증합니다.이해하기 쉽다.
App.js

import React from 'react';
import { BrowserRouter, Route, Switch, NavLink } from 'react-router-dom';

//import screens
import Home from './screens/Home';
import About from './screens/About';
import Login from './screens/Login';

//Auth
import Auth from './Auth';

class App extends React.Component {
     render() {
          return (
               <BrowserRouter>
                    <Switch>
                         <Route exact path="/login" component={Login} />
                         <Auth>
                              <Switch>
                                   <Route exact path="/" component={Home} />
                                   <Route exact path="/about" component={About} />
                                   <Route render={() => (<p>Page not found.</p>)} />
                              </Switch>
                         </Auth>
                    </Switch>
               </BrowserRouter>
          );
     }
}

export default App;

동작 확인

yarn start를 통해 동작을 확인합니다.
먼저 로그인합니다.

그리고 로그인한 페이지입니다.

로그아웃이 정상적으로 작동하는지, 로그아웃할 때/about 등에 접근할 때 차단되었는지, (login으로 리디렉션되었는지) 등을 확인합니다.

세 번째 복습

react-router의 미인증, 인증을 사용할 때의 절분을 복습했다.

예약하다

앞으로 다음 내용을 추가할 예정이다.

Redux의 값, 함수를 이용한 공유

Firebase와의 협력 (Auth, Hosting, functions를 이용한 Form 설정 등)

호스팅을 호스팅하십시오.

.env의 사용