첫 번째 학자의 React×Rails 어플리케이션 개발 13회]

12189 단어 ReactRails

한 일

  • 로그아웃 및 계정 삭제 설치
  • 로그아웃 중, 브라우저의 로컬 메모리에 저장된 token 등 정보를 삭제합니다
  • 계정은 Rails에서 destroy에서 삭제됩니다
  • 인도물



    구현 단계


    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
    

    구현 단계


    Logout.js

  • 로그아웃하더라도 로컬 저장된 정보만 삭제합니다
  • 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>
        )
    
      }
    }
    
    

    좋은 웹페이지 즐겨찾기