登录vue和laravel后如何重定向回上一页? [英] How can I redirect back to previous page after login on vue and laravel?

问题描述

我使用 vue.js 2 和 laravel 5.6

I use vue.js 2 and laravel 5.6

我的 vue 组件是这样的:

My vue component like this :

<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>

如果用户没有登录，会调用logout方法

If the user is not logged in, it will call the logout method

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

I try like the code above, but if user login, it does not redirect to the previous page

我该如何解决这个问题?

How can I solve this problem?

推荐答案

Laravel 要求你在注销时执行 POST 请求.

Laravel requires you do do a POST request when logging out.

为此，您需要 csrf 令牌 和 logout url.

In order to do this you will need the csrf token and the logout url.

我会将这 2 个作为 props 传递(在刀片模板中):

I would pass these 2 as props (in a blade template) :

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

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

Then you should add a hidden form to your template and add the appropriate logic:

<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()方法来发出post请求

Basically you will make the post request by calling the logout() method

这篇关于登录vue和laravel后如何重定向回上一页?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！