Маршрут выхода из Laravel в компоненте Vue - PullRequest
Новая
       8

Маршрут выхода из Laravel в компоненте Vue

0 голосов

В моем проекте 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>

Но в этом случае код не компилируется. Я вижу, что не могу использовать маршруты Laravel в компоненте Vue. Что я могу сделать в этом случае?

1 Ответ

0 голосов
/ 30 сентября 2018

Вы можете определить метод для вызова маршрута выхода из системы

вы не можете использовать синтаксис лезвия laravel внутри компонента vue 

<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 в свой метатег.
...