98日目：引き続きReact User Authentication作成：axiosとuseEffect Hooksについて学ぶ

2019年06月23日 2019年06月28日

キョウコ

前回から引き続き、ユーザーのauthenticationができるように、src/actions/auth.jsとsrc/reducers/auth.jsの変更をメインに行いload User とAuth Tokenの設定が行えるようにしました。

まず、tokenを取得し、auth routeにリクエストを送ります。ユーザーの情報を取得して、authenticationがtrueの場合にはUSER_LOADED(action type)になるというものです。

また、何度も出てくるJavascriptライブラリ axiosについての復習と、新しく出てきたuseEffect Hookについても学習しました。

src/actions/auth.jsに書き足したコード // Load Userで囲った部分

import axios from "axios";
import { setAlert } from "./alert";
import {
  REGISTER_SUCCESS,
  REGISTER_FAIL,
  USER_LOADED,
  AUTH_ERROR
} from "./types";
import setAuthToken from "../utils/setAuthToken";

// Load User
export const loadUser = () => async dispatch => {
  if (localStorage.token) {
    setAuthToken(localStorage.token);
  }

  try {
    const res = await axios.get("./api/auth");

    dispatch({
      type: USER_LOADED,
      payload: res.data
    });
  } catch (err) {
    dispatch({
      type: AUTH_ERROR
    });
  }
};

//Register User
export const register = ({ name, email, password }) => async dispatch => {
  const config = {
    headers: {
      "Content-Type": "application/json"
    }
  };

  const body = JSON.stringify({ name, email, password });

  try {
    const res = await axios.post("/api/users", body, config);

    dispatch({
      type: REGISTER_SUCCESS,
      payload: res.data
    });
  } catch (err) {
    const errors = err.response.data.errors;

    if (errors) {
      errors.forEach(error => dispatch(setAlert(error.msg, "danger")));
    }

    dispatch({
      type: REGISTER_FAIL
    });
  }
};

src/reducers/auth.jsに書き足した部分　（USER_LOADED, AUTH_ERRORの部分）

import {
  REGISTER_SUCCESS,
  REGISTER_FAIL,
  USER_LOADED,
  AUTH_ERROR
} from "../actions/types";

const initialState = {
  token: localStorage.getItem("token"),
  isAuthenticated: null,
  loading: true,
  user: null
};

export default function(state = initialState, action) {
  const { type, payload } = action;

  switch (type) {
    case USER_LOADED:
      return {
        ...state,
        isAuthenticated: true,
        loading: false,
        user: payload
      };
    case REGISTER_SUCCESS:
      localStorage.setItem("token", payload.token);
      return {
        ...state,
        ...payload,
        isAuthenticated: true,
        loading: false
      };
    case REGISTER_FAIL:
    case AUTH_ERROR:
      localStorage.removeItem("token");
      return {
        ...state,
        token: null,
        isAuthenticated: false,
        loading: false
      };
    default:
      return state;
  }
}

src/actions/type.jsも一部買い足し追加　（USER_LOADED, AUTH_ERROR)

export const SET_ALERT = "SET_ALERT";
export const REMOVE_ALERT = "REMOVE_ALERT";
export const REGISTER_SUCCESS = "REGISTER_SUCCESS";
export const REGISTER_FAIL = "REMOVE_ALERT";
export const USER_LOADED = "USER_LOADED";
export const AUTH_ERROR = "AUTH_ERROR";

新しいフォルダutils(utilities)の追加とファイルsetAuthToken.jsの作成 src/utils/setAuth.js

import axios from "axios";

const setAuthToken = token => {
  if (token) {
    axios.defaults.headers.common["x-auth-token"] = token;
  } else {
    delete axios.defaults.headers.common["x-auth-token"];
  }
};

export default setAuthToken;

何のためにaxiosを使った関数を書くのか？に対する回答

このファイルについては、Udemy講座のQ&Aコーナーで「（上記のaxiosの関数は）何をするための関数なのか？」という質問がありました。

回答には、「Tokenをaxios headerに”x-auth-token"として添付するためのもので、もしtokenが通れば（passすれば、あるいは存在すれば）手動で作業を行う必要はなく、axiosを使ってAPI serverにhttp requestを行う。もしtokenが通らない（passしない）または存在しない場合は、この関数がaxios headerからtokenを削除する」と書いてありました。

（MERN Stack:Front to End: Lecture 41 質問した人: Usama 回答した人: Mateuzwszola)

axiosの基本的な使い方については、Qiitaの@ksh-fthrさんの記事で学習しました。
参照記事は⇒[axios] axios の導入と簡単な使い方　です。

axiosとは、