Question

我使用vue.js 2和laravel 5.6

我的vue组件是这样的：

<template>
    <a v-if="auth" href="javascript:" class="btn btn-default btn-block" @click="add($event)">
        Add
    </a>
    <a v-else href="javascript:" class="btn btn-default btn-block" @click="logout">
        Add
    </a>
</template>
<script>
    export default {
        data() {
            return {
                auth: App.authCheck
            }
        },
        methods: {
            add(event) {
               ...
            },
            logout() {
                window.location = '/login?red='+window.location.pathname
            }
        }
    }
</script>

如果用户未登录，则会调用注销方法

我尝试上面的代码，但如果用户登录，则不会重定向到上一页

我该如何解决这个问题？

Answer 1

Laravel要求您在退出时执行POST请求。

要执行此操作，您需要csrf token和logout url。

我会将这两个传递给props（在刀片模板中）：

<my-component 
    logout-url="{{route('logout')}}" 
    csrf-token="{{ csrf_token() }}">
</my-component>

然后你应该在模板中添加一个隐藏的表单并添加适当的逻辑：

<template>
    <a v-if="auth" href="javascript:" class="btn btn-default btn-block" @click="add($event)">
        Add
    </a>
    <a v-else href="javascript:" class="btn btn-default btn-block" @click="logout">
        Add
    </a>
    <form id="vue-logout-form" v-action="{{ logoutUrl }}" method="POST" style="display: none;">
        <input name="_token" type="hidden" value="{{ csrfToken }}">
    </form>
</template>
<script>
    export default {
        props: {
            logoutUrl:{type: String},
            csrfToken:{type: String}
        },
        [...]
        methods: {
            logout() {
                document.getElementById("vue-logout-form").submit();
            }
        }
    }
</script>

基本上，您可以通过调用logout()方法

来发布帖子请求

如何在vue和laravel登录后重定向回到上一页？

1 个答案: