登录vue和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
相关文章