如何使用 Laravel 5.4 和 Vue.js 2 正确存储 JWT 令牌答案

【问题标题】：How to store JWT token properly using Laravel 5.4 and Vue.js 2如何使用 Laravel 5.4 和 Vue.js 2 正确存储 JWT 令牌
【发布时间】：2018-07-25 20:21:29
【问题描述】：

我正在使用 Laravel 5.4 编写一个 API，并从用 Vue.js 2 编写的前端连接到它。登录后 API 将令牌返回给我，那么我应该如何以及在哪里将令牌存储在前端？现在，我为此使用 localStorage ，但这似乎不是正确的方法。

这是我检查令牌的方式：

router.beforeEach((to, from, next) => {
  if(to.meta.requiresAuth) { 
    if(store.getters.logged || window.localStorage.getItem('access_token')) { 
      next();
    }
    else {
      next('/login');
    }
  }
  else {
    next();
  }
});

【问题讨论】：

标签： javascript laravel rest api vue.js

【解决方案1】：

localStorage 不是异步的，因此登录后，您需要刷新整个页面，这是非常糟糕的用户体验来刷新单页面应用程序，我相信这是您使用 Vue 开发的。

我可以建议的是localForage，它只不过是异步localStorage。它基于 Promise，语法看起来非常类似于 localStorage。

示例：

localforage.setItem(key, value, successCallback)
localforage.getItem('access_token', myCallback);

要在每个请求中将令牌发送到后端，您应该使用vue.http.interceptors。

示例：

Vue.http.interceptors.push((request, next)  => {
  request.headers['Authorization'] = auth.getAuthHeader()
    next((response) => {
      if(response.status == 401 ) {
        auth.logout();
        router.go('/login?unauthorized=1');
      }
   });
});

在Docs 中了解更多信息。

【讨论】：

我的代码仅在一种情况下无法正常工作：它不会过期。如果我关闭浏览器然后打开它，我可以毫无问题地访问我的/admin 路由。所以，在我的 localStorage 中，我总是有令牌。