Vue组件中的Laravel注销路由答案

【问题标题】：Laravel logout route in Vue componentVue组件中的Laravel注销路由
【发布时间】：2018-10-15 07:39:05
【问题描述】：

在我的 Laravel 5.5 项目中，我有一个 Vue 组件作为单独的文件，扩展名为 .vue。
在其模板中有一个 vue-router 链接。另外，我需要在这里放置标准的 Laravel 注销链接。

<template>
    <div>
        <ul class="nav navbar-nav">
            <li><router-link to="/">Home</router-link></li>
            <!-- place where I want to add Laravel logout link -->
        </ul>
    </div>
</template>

我尝试像这样插入 Laravel 注销链接：

<template>
  <div>
      <ul class="nav navbar-nav">
          <li><router-link to="/">Home</router-link></li>

          <li>
            <a href="{{ route('logout') }}" onclick="event.preventDefault();    
                     document.getElementById('logout-form').submit();">
                 Logout
            </a>
            <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                  {{ csrf_field() }}
            </form>
          </li>

        </ul>
    </div>
</template>

但在这种情况下代码无法编译。我看到我不能在 Vue 组件中使用 Laravel 路由。在这种情况下我能做什么？

【问题讨论】：

标签： laravel-5 vuejs2 vue-component vue-router

【解决方案1】：

你可以定义一个方法来调用注销路由

你不能在 vue 组件中使用 laravel Blade 语法

<template>
  <div>
      <ul class="nav navbar-nav">
          <li><router-link to="/">Home</router-link></li>

          <li><a href="#" @click.prevent="logout">Logout</a></li>

        </ul>
    </div>
</template>
<script>
    export default {
        data: () => ({
             csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
             }),   
        methods:{
            logout:function(){
               axios.post('logout').then(response => {
                  if (response.status === 302 || 401) {
                    console.log('logout')
                  }
                  else {
                    // throw error and go to catch block
                  }
                }).catch(error => {

              });
            },
        },
    }
</script>

注意：

这里我使用axios 来处理http 请求，如果你不知道那你也可以使用普通的ajax 请求
对于 csrf 令牌，您应该在元标记中包含 csrf 数据。

【讨论】：

如果您收到与路由和方法相关的错误“此路由不支持 POST 方法。支持的方法：GET、HEAD、PUT、PATCH、DELETE。”然后确保使用 axios.post('/logout')... 注意“/”部分。
你没有通过csrf字段

【解决方案2】：

好吧，Laravel 会在 axios 请求中自动添加 csrf 令牌。所以这段代码对我有用

<template>

    <span>
        <a href="#" @click.prevent="logout()">Logout</a>
    </span>

</template>

<script>
    export default {
        name: "Logout",
        methods: {
            logout() {
                axios.post('/logout')
                    .catch(error => {
                       window.location.href = '/login';
                    });
            }
        }
    }
</script>

【讨论】：