Question

在我的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路由。在这种情况下我该怎么办？

Answer 1

您可以定义一种调用登出路线的方法

您不能在vue组件内使用laravel刀片语法

<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组件中注销路线

2 个答案: