ログアウト、アカウント削除の実装 【初学者のReact×Railsアプリ開発 第13回】

やったこと

• ログアウトとアカウント削除の実装
• ログアウトでは、ブラウザのLocalStorageに保存してあるtokenなどの情報を消去している。
• アカウント削除はRailsでdestroy。

成果物

実装手順（Rails）

users_controller

• 消去するアカウントはログイン中のアカウントなので、current_userを使っている

users_controller.rb

      def destroy
        @user = current_api_v1_user
        @user.destroy
        render json: { status: 'SUCCESS', message: 'Delete the user', data: @user}
      end

実装手順（React）

Logout.js

• ログアウトといっても、LocalStorageの情報を消去するだけ。
• localStorage.clear();

Logout.js

class Logout extends React.Component {

  constructor(props) {
    super(props);
  }

  Logout() {
    localStorage.clear();
    window.location.href = process.env.REACT_APP_BASE_URL;
  }

  notLogout() {
    window.history.back()
  }

  render() {
    const { classes } = this.props;
    return (
      <div>
        <h3>ログアウトしますか？</h3>
        <Button variant="contained" size="large" color="secondary" className={classes.button} onClick={this.Logout}>
          する
        </Button>
        <Button variant="contained" size="large" color="primary" className={classes.button} onClick={this.notLogout}>
          しない
        </Button>
      </div>
    )

  }
}

DeleteAccount.js

• HTTPのDELETEメソッドを使って消去している

DeleteAccount.js

class Deleteaccount extends React.Component {

  constructor(props) {
    super(props);
    this.Deleteaccount = this.Deleteaccount.bind(this);
  }

  Deleteaccount() {
    const { CurrentUserReducer } = this.props;
    const auth_token = localStorage.auth_token
    const client_id = localStorage.client_id
    const uid = localStorage.uid
    axios.delete(process.env.REACT_APP_API_URL + `/api/v1/users`,
      {
        headers: {
          'access-token': auth_token,
          'client': client_id,
          'uid': uid
        }
      })
    localStorage.clear();
    window.location.href = process.env.REACT_APP_API_URL;
  }

  notDeleteaccount() {
    window.history.back()
  }

  render() {
    const { classes } = this.props;


    return (
      <div>
        <h3>アカウントを削除しますか？</h3>
        <Button variant="contained" size="large" color="secondary" className={classes.button} onClick={this.Deleteaccount}>
          する
        </Button>
        <Button variant="contained" size="large" color="primary" className={classes.button} onClick={this.notDeleteaccount}>
          しない
        </Button>
      </div>
    )

  }
}