Laravel Vue 组件中的注销路由

Question

在我的 Laravel 5.5 项目中，我有一个 Vue 组件作为一个单独的文件，扩展名为 .vue。
在它的模板中有一个 vue-router link。另外，我需要在此处放置标准 Laravel logout link。

<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 注销 link:

<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 路由。在这种情况下我能做什么？

Answer 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 数据。

Answer 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>

Laravel Vue 组件中的注销路由

Laravel logout route in Vue component

laravel-5

vue-router

vue-component

vuejs2