Laravel 5.5 Vue组件中添加Laravel退出登录链接的问题

我之前也碰到过一模一样的问题——Laravel默认的退出路由（/logout）是POST请求，而<router-link>或者普通的<a>标签都是发GET请求，直接用的话会触发405 Method Not Allowed错误。下面给你两种实用的解决办法：

方法一：使用隐藏表单提交（贴合Laravel默认机制） #

这种方式最符合Laravel的原生退出逻辑，通过隐藏表单来发送POST请求，配合Vue的点击事件触发提交：

<template>
  <div>
    <ul class="nav navbar-nav">
      <li><router-link to="/">Home</router-link></li>
      <!-- 新增的退出链接 -->
      <li>
        <a href="#" @click.prevent="handleLogout">Logout</a>
        <!-- 隐藏的退出表单 -->
        <form id="logout-form" action="/logout" method="POST" style="display: none;">
          <input type="hidden" name="_token" :value="csrfToken">
        </form>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 从Laravel全局变量获取CSRF令牌，需要提前在blade模板中定义
      csrfToken: window.Laravel.csrfToken
    }
  },
  methods: {
    handleLogout() {
      document.getElementById('logout-form').submit();
    }
  }
}
</script>

前置准备： #

要确保你的Laravel主模板（比如resources/views/layouts/app.blade.php）中已经注入了CSRF令牌的全局变量：

<script>
    window.Laravel = {!! json_encode([
        'csrfToken' => csrf_token(),
    ]) !!};
</script>

方法二：用Axios发起POST请求（更Vue化的方案） #

如果你的项目已经引入了Axios，可以直接在Vue方法里发送POST请求完成退出，之后再通过vue-router跳转页面：

<template>
  <div>
    <ul class="nav navbar-nav">
      <li><router-link to="/">Home</router-link></li>
      <li><a href="#" @click.prevent="handleLogout">Logout</a></li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    async handleLogout() {
      try {
        await axios.post('/logout');
        // 退出成功后跳转到登录页或首页
        this.$router.push('/login');
      } catch (err) {
        console.error('退出失败:', err);
      }
    }
  }
}
</script>

注意事项： #

要确保Axios已经配置了CSRF令牌，通常在resources/js/bootstrap.js里添加：

window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = window.Laravel.csrfToken;

最后再提醒下：确认你的routes/web.php里已经包含了Laravel自带的认证路由（Auth::routes();），它会自动注册POST /logout的退出路由；如果是自定义路由，记得修改对应请求的URL。

内容的提问来源于stack exchange，提问作者Виталий Комаров