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

Posted 2023-02-23

【中文标题】登录vue和laravel后如何重定向回上一页？

【英文标题】：How can I redirect back to previous page after login on vue and laravel?

【发布时间】：2018-08-28 15:54:00

【问题描述】：

我使用 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>

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

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

我该如何解决这个问题？

【问题讨论】：

如果您希望登录重定向到您的当前页面，您的/login 组件必须使用red= 查询参数。是这样吗？

@acdcjunior 我仍然很困惑。不过好像是这样的

/login 是你的一个组件还是来自 laravel 的东西？如果它是一个组件，请显示它。

你最好使用 vue-router。

@Dencio 尝试详细回答

【参考方案1】：

Laravel 要求您在注销时执行 POST 请求。

为此，您需要csrf token 和logout url。

我会将这 2 个作为 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()方法来发出post请求