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

Question

我正在使用Laravel 5.4编写API，并从Vue.js 2中编写的前端连接到该API。登录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();
  }
});

Answer 1

localStorage不是异步的，因此在登录后，您将需要刷新整个页面，这对于刷新单页面应用程序来说是非常糟糕的UX，我相信这是您自使用Vue以来开发的。

我可以建议的是localForage ，它不过是异步localStorage 。 它基于localStorage ，语法看起来与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中阅读有关此内容的更多信息。