Vue.js / Laravel - 正确处理注销

新手上路,请多包涵

我目前正在尝试使用 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')
}

然而,当用户点击注销功能时,他们并没有立即注销(重定向到登录页面)——他们仍然可以浏览“仅限用户的页面”。

在正确注销之前,我必须刷新页面。

任何人都可以帮助我吗?这甚至是“安全”注销功能的正确方法吗?

原文由 oliverbj 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 735
2 个回答

我自己从未使用过 Laravel,但您应该能够处理注销客户端,而无需在后端执行任何操作。目前您从本地存储中删除了身份验证令牌,因此用户无法访问需要您登录才能获取的数据。

您可能会调用您的 getUser 当您刷新页面时,这就是为什么您只是登出的原因 - 您将空令牌发送到后端服务器,它找不到与之关联的用户并返回一个空的/默认来宾对象。剩下要做的是在删除 logout() 函数中的令牌后清除您的用户状态,或者向您的 /get-user 端点发送请求。

原文由 dziraf 发布,翻译遵循 CC BY-SA 4.0 许可协议

这有点老了,但是,我刚开始使用 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();
   }
 }
}

除了在你的头(blade.php 文件)中添加一个 meta csrf 之外,如下所示:

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

我假设您将在导航栏 .vue 文件中使用注销

原文由 StoeV_No1 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题