Vue 구성 요소의 Laravel 로그아웃 경로

Vue 구성 요소의 Laravel 로그아웃 경로

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>

다음과 같이 Larabel 로그아웃링크를 삽입하려고 했습니다.

<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 루트를 사용할 수 없습니다.이럴 때는 어떻게 해야 하나요?

로그아웃 루트를 호출하는 방법을 정의할 수 있습니다.

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>

주의:

• 여기서 나는 http 요청에 악시오스를 사용했는데, 만약 당신이 그것에 대해 모르면, 당신은 또한 일반적인 ajax 요청을 사용할 수 있습니다.
• csrf 토큰에는 csrf 데이터를 메타 태그에 포함해야 합니다.

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>

언급URL : https://stackoverflow.com/questions/50181321/laravel-logout-route-in-vue-component