Vue.js / Larabel - 로그아웃을 올바르게 처리

Vue.js / Larabel - 로그아웃을 올바르게 처리

현재 Vue와 Laravel을 사용하여 간단한 SPA를 만들려고 합니다.기본적인 작업을 할 수 있습니다.사용자는 등록과 로그인이 가능합니다.

로그아웃 기능을 만드는 방법을 알 수 없습니다.

현재 가지고 있는 것은 다음과 같습니다.

AuthController.php:

public function logout()
{
        $accessToken = auth()->user()->token();

        $refreshToken = DB::table('oauth_refresh_tokens')
        ->where('access_token_id', $accessToken->id)
        ->update([
            'revoked' => true
        ]);

        $accessToken->revoke();

        return response()->json(['status' => 200]);
}

routes/api.php:

Route::middleware('auth:api')->group(function () {
    Route::post('/logout', 'API\AuthController@logout');
    Route::get('/get-user', 'API\AuthController@getUser');
});

지금 제가 하려고 하는 것은 다음과 같습니다.

Layout.vue:

methods: {
            logout() {
                axios.post('/api/logout').then(response => {
                    this.$router.push("/login")

                }).catch(error => {
                    location.reload();
                });
            }
 }

그러면 로그아웃 기능이 호출됩니다.Auth.js:

logout() {
    localStorage.removeItem('token')
    localStorage.removeItem('expiration')
}

단, 사용자가 로그아웃 기능을 클릭해도 바로 로그아웃되지 않고(로그인 페이지로 리디렉션됨) "사용자 전용 페이지"를 참조할 수 있습니다.

로그아웃하기 전에 페이지를 새로 고쳐야 합니다.

누가 이것 좀 도와줄래?이것이 안전한 로그아웃 기능에 대한 올바른 접근법입니까?

좀 오래되었지만, Laravel/Vue에서 시작한 지 얼마 안 되어 매우 간단하게 이 작업을 수행할 수 있었습니다.Larabel의 통합 인증을 사용하면 app.blade에서 로그아웃을 시뮬레이트할 수 있습니다.php는 다음과 같습니다.

<b-dropdown-item href="#" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">Sign Out</b-dropdown-item> //that's instead of a regular <a> tag
<b-form id="logout-form" action="logout" method="POST" style="display: none;">
   <input type="hidden" name="_token" :value="csrf">
</b-form>

CSRF 토큰이 다음과 같이 동작하려면 스크립트의 데이터를 통과해야 합니다.

export default {
 data() {
   return {
     csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content')
   }
 },
 methods: {
   submit : function(){
     this.$refs.form.submit();
   }
 }
}

또한 meta csrf를 머릿속에 추가합니다(블레이드).php 파일)과 같이 입력합니다.

<meta name="csrf-token" content="{{ csrf_token()}}">

navbar .vue 파일에 있는 로그아웃을 사용할 것으로 추측됩니다.

Larabel을 직접 사용한 적은 없지만 백엔드에서 아무것도 하지 않고도 로그아웃 클라이언트 측을 처리할 수 있습니다.로컬 스토리지에서 인증 토큰을 삭제하면 사용자는 로그인해야 얻을 수 있는 데이터에 액세스할 수 없게 됩니다.

아마 전화하실 겁니다getUser페이지를 새로 고치면 로그아웃만 됩니다.빈 토큰을 백엔드 서버로 전송하면 연결된 사용자를 찾을 수 없고 빈 게스트 개체 또는 기본 게스트 개체를 반환합니다.이제 남은 것은 토큰을 삭제한 후 사용자 상태를 클리어하는 것입니다.logout()기능을 수행하거나 요청을 전송합니다./get-user엔드 포인트

로그아웃 링크에 대해 Laravel에 현재 사용자의 (Passport JWT) 토큰을 무효화하도록 요청하고 싶습니다.

방법은 다음과 같습니다.

백엔드:

AuthController.php

로그아웃 방법이 있습니다.

  ...

  public function logout(Request $request) {
    $request->user()->token()->revoke();

    return response()->json([
       'message' => 'Successfully logged out'
    ]);
  }

routes/api.php

인증을 받아야만 접근할 수 있는 루트가 있습니다.

Route::group(['middleware' => 'auth:api'], function() {
  ...

  Route::get('/logout', 'AuthController@logout');
});

프런트 엔드:

이를 위해 Vue의 단일 파일 컴포넌트를 사용하고 있습니다.

App.vue

<template>
  <nav>
    <ul>
      ...
        <li v-if="isLoggedIn">
          <a id="logout-link" href="#" @click.prevent="logout">Logout</a>
        </li>
    </ul>
  </nav>
  ...
</template>

<script>
export default {
   ...
   methods: {
     logout(evt) {
       if(confirm("Are you sure you want to log out?")) {
         axios.get('api/logout').then(response => {
          localStorage.removeItem('auth_token');

          // remove any other authenticated user data you put in local storage

          // Assuming that you set this earlier for subsequent Ajax request at some point like so:
          // axios.defaults.headers.common['Authorization'] = 'Bearer ' + auth_token ;
          delete axios.defaults.headers.common['Authorization'];

          // If using 'vue-router' redirect to login page
          this.$router.go('/login');
        })
        .catch(error => {
          // If the api request failed then you still might want to remove
          // the same data from localStorage anyways
          // perhaps this code should go in a finally method instead of then and catch
          // methods to avoid duplication.
          localStorage.removeItem('auth_token');
          delete axios.defaults.headers.common['Authorization'];
          this.$router.go('/login');
        });       
       }
     }
   }
}
</script>

이 접근방식의 포인트는 로그아웃 시 백엔드의 토큰을 무효화하는 것입니다.그러나 토큰의 유효기간이 짧은 경우에는 이 작업을 수행할 필요가 없습니다.

로그아웃 하려면 Larabel 6*/7*/8*에서 설치 액시스를 설치하고 나머지 코드를 실행합니다.

npm install axios

로그아웃을 클릭할 때 이 코드를 트리거합니다.

axios.post("logout").then(response => { 
   console.log(response);
})
.catch(error => {
   console.log(error);
});

로그아웃에 성공한 경우 javascript를 사용하여 리다이렉트해 보십시오.

window.location.replace("desiredURL");

언급URL : https://stackoverflow.com/questions/52021405/vue-js-laravel-handle-logout-correctly