Not using Hook

App.tsx

import React, { Component } from "react";
import { Router, Switch, Route } from "react-router-dom";
import styled from "styled-components";
import { createBrowserHistory } from "history";

import MenuBar from "./components/menu";
import Home from "./components/home";
import SignIn from "./components/signIn";
import { getAuthToken } from "./helpers/authHelper";

const BodyWrapper = styled.div`
  margin-top: 30px;
`;

class App extends Component {
  public componentDidMount() {
    getAuthToken(); // auto Login 이라고 가정.
  }
  public render() {
    return (
      <Router history={createBrowserHistory()}>
        <div>
          <MenuBar />

          <BodyWrapper>
            <Switch>
              <Route path="/signin" component={SignIn} />
              <Route component={Home} />
            </Switch>
          </BodyWrapper>
        </div>
      </Router>
    );
  }
}

export default App;

authHelper.tsx

import * as React from "react";
import * as CookieHandler from "js-cookie";
import { Base64 } from "js-base64";

const getAuthToken = () => {
  const authToken = CookieHandler.get("auth_token");
  if (authToken) {
    return Base64.decode(authToken);
  }
  return "";
};

function setAuthToken(params: { id: string; password: string }) {
  try {
    const encodedParams = Base64.encode(JSON.stringify(params));
    CookieHandler.set("auth_token", encodedParams);
    return true;
  } catch (err) {
    return false;
  }
}

export { getAuthToken, setAuthToken };

home.tsx

import * as React from "react";
import { getAuthToken } from "../../helpers/authHelper";

const Home = () => {
  const authState = Boolean(getAuthToken());
  return (
    <div>
      HELLO WORLD! We R Vingle Developers!!
      <br />
      {authState ? "로그인을 환영합니다!!" : null}
    </div>
  );
};

export default Home;

menuBar.tsx

import * as React from "react";
import styled from "styled-components";
import { Link } from "react-router-dom";

// hooks
import { getAuthToken } from "../../helpers/authHelper";

const MenuBarWrapper = styled.div`
  display: flex;
  align-items: center;

  a {
    display: block;
  }
  a + a {
    margin-left: 16px;
  }
`;

const MenuBar = () => {
  const authState = Boolean(getAuthToken());

  return (
    <MenuBarWrapper>
      <Link to="/home">HOME</Link>
      {authState ? "Already Logged in" : <Link to="/signin">Sign In</Link>}
    </MenuBarWrapper>
  );
};

export default MenuBar;

signIn.tsx

import * as React from "react";
import { setAuthToken, getAuthToken } from "../../helpers/authHelper";
import { Redirect } from "react-router";

interface IState {
  username: string;
  password: string;
}

export default class SignIn extends React.PureComponent<{}, IState> {
  public state: IState = {
    username: "",
    password: "",
  };

  public render() {
    const { username, password } = this.state;

    if (this.getAuthState()) {
      return <Redirect to="/home" />;
    }

    return (
      <div>
        <div>
          <input
            placeholder="Username"
            type="text"
            value={username}
            onChange={this.changeUsername}
          />
        </div>
        <div>
          <input
            placeholder="Password"
            type="password"
            value={password}
            onChange={this.changePassword}
          />
        </div>

        <input type="button" onClick={this.handleSubmit} value="Sign In" />
      </div>
    );
  }

  private readonly getAuthState = () => {
    const isSignedIn = getAuthToken();
    return Boolean(isSignedIn);
  };

  private readonly handleSubmit = () => {
    const { username, password } = this.state;
    setAuthToken({
      id: username,
      password: password,
    })
      ? location.reload()
      : null;
  };

  private readonly changeUsername: React.ChangeEventHandler<
    HTMLInputElement
  > = e => {
    this.setState({
      username: e.currentTarget.value,
    });
  };

  private readonly changePassword: React.ChangeEventHandler<
    HTMLInputElement
  > = e => {
    this.setState({
      password: e.currentTarget.value,
    });
  };
}