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

oileme · 7年前

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

John Howard

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

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

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