Vue.js / Laravel - правильно обрабатывать выход

Question

В настоящее время я пытаюсь создать простой SPA, используя Vue и Laravel. У меня есть основы для работы - пользователи могут зарегистрироваться и войти в систему.

Я просто не могу понять, как создать функцию выхода из системы.

Это то, что у меня сейчас есть:

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')
}

Однако, когда пользователи нажимают на функцию выхода из системы, они не выходят из системы сразу (перенаправляются на страницу входа в систему) - они по-прежнему могут просматривать «только пользовательские страницы».

Мне нужно обновить страницу, прежде чем я выйду из системы.

Может ли кто-нибудь помочь мне с этим? Это даже правильный подход к «безопасной» функции выхода из системы?

Answer 1

Это немного устарело, однако я только начал с Laravel / Vue и сумел сделать это довольно просто. Используя встроенную аутентификацию от Laravel, вы можете просто смоделировать выход из 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();
   }
 }
}

Так же, как добавление мета csrf в вашу голову (файл blade.php), вот так:

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

Я предполагаю, что вы будете использовать выход из системы в файле navbar .vue

Answer 2

Попробуйте перенаправить с помощью JavaScript при успешном выходе из системы:

window.location.replace("desiredURL");

Answer 3

Для ссылок на выход из системы я хотел бы сделать запрос в 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>

Смысл этого подхода состоит в том, чтобы аннулироватьтокен на конце при выходе.Тем не менее, это может не потребоваться, если токен имеет короткие сроки действия.

Answer 4

Никогда не использовал Laravel сам, но вы должны иметь возможность обрабатывать выходы из системы на стороне клиента без необходимости что-либо делать в своем бэкэнде. В данный момент вы удаляете токен аутентификации из локального хранилища, поэтому пользователь теряет доступ к данным, для получения которых вам необходимо войти в систему.

Вы, вероятно, звоните своему getUser, когда обновляете страницу, и поэтому вы выходите из системы только тогда - вы отправляете пустой токен на ваш бэкэнд-сервер, он не может найти связанного с ним пользователя и возвращает пустой / гостевой объект по умолчанию. Осталось только очистить свое пользовательское состояние после удаления токена из функции logout() или отправить запрос на конечную точку /get-user.