急救，Laravel 和 VueJS 搭建单文件应用

我用L5 和 Vue2 做了一个登陆页面。
都可以正常操作，但发现过一段时间再提交会出现token错误。
因为vue-router 我没用 history来访问。
所以网站的token一直是一个值。
刚开始我是在JS里直接定义

window.Laravel = {
    csrfToken:"{ csrf_token() }"
};

我想因为地址是 xxx.com/#/admin/login 这个形式，所以没法刷新token的。
（个人理解的）
但是总不能每几秒ajax一个token吧，觉得也不合适。
是否有更好更方便的解决方式呢？

我的模板文件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>...</title>
<link rel="stylesheet" href="{ asset('sources/normalize.min.css') }">
<link rel="stylesheet" href="{ asset('sources/admin/admin.css') }">
</head>
<body>
<div id="Ant"></div>
</body>
<script>
window.Laravel = {
    csrfToken:"{ csrf_token() }"
};
window.User = {!! auth()->guard('admin')->user() ?: 'null' !!};
</script>
<script src="{ asset('sources/admin/admin.js') }"></script>
</html>

除了检查被作为 POST 参数传递的 CSRF token 之外, VerifyCsrfToken 中间件也会检查请求标头中的 X-CSRF-TOKEN。例如，你可以将其保存在 meta 标签中：

<meta name="csrf-token" content="{ csrf_token() }">

https://laravel.com/docs/5.3/csrf
试试这种方法

John Howard
8年前

除了检查被作为 POST 参数传递的 CSRF token 之外, VerifyCsrfToken 中间件也会检查请求标头中的 X-CSRF-TOKEN。例如，你可以将其保存在 meta 标签中：

<meta name="csrf-token" content="{ csrf_token() }">

https://laravel.com/docs/5.3/csrf
试试这种方法

0 分享
oileme 回复 John Howard
8年前

谢谢你的答复，这个也是没法获取新的token值。
该问题已解决了，没必要自动刷新token，只要发送POST前刷新一次就行

Route

Route::get('token',function(){
    return csrf_token();
});

Login Vue

Vue.http.get('/token').then((response) => {
    window.Laravel.csrfToken = response.body;
    Vue.http.post(...);// ajax提交
});

大概是这个逻辑，还有更好的解决方案的话，教导我下下 233333

0 分享
John Howard 回复 oileme
8年前

我看YouTube上的一个大神这么写的：

Vue.http.headers.common['X-CSRF-TOKEN'] = 
    document.querySelector("meta[name=csrf-token]").getAttribute('xxxx');

blade里面：

<meta name="csrf-token" content="{ csrf_token() }">

希望能帮到你

0 分享