feat(loopback): add token in local storage

Author: Walker Leite

template/client/router.js

@@ -34,23 +34,7 @@ const router = new VueRouter({
   ],
 });
 
-router.beforeEach((to, from, next) => {
-  if (to.matched.some(record => record.meta.requiresAuth)) {
-    // this route requires auth, check if logged in
-    // if not, redirect to login page (except when it's profile route and
-    // there is an access_token).
-    if (to.name === 'profile' && to.query.access_token) {
-      next();
-    } else if (!store.state.auth.access_token) {
-      next({
-        name: 'login',
-      });
-    } else {
-      next();
-    }
-  } else {
-    next(); // make sure to always call next()!
-  }
-});
+// Sync routes with auth module
+store.dispatch('auth/syncRouter', router);
 
 export default router;

template/client/services/loopback.js

@@ -1,16 +1,44 @@
-import {host, restApiRoot, port} from '~/server/config.json';
+import { host, restApiRoot, port } from '~/server/config.json';
 import axios from 'axios';
 
+const Storage = window.localStorage;
+
+/**
+ * Add a token in the local storage
+ * */
+function exportTokenToLocalStorage(token) {
+  if (Storage) {
+    Storage.setItem('loopback-token', JSON.stringify(token));
+  }
+}
+
+/**
+ * Remove token from local storage
+ */
+function removeTokenFromLocalStorage() {
+  if (Storage) {
+    Storage.removeItem('loopback-token');
+  }
+}
+
+function addTokenFromLocalStorage(http) {
+  const token = Storage && Storage.getItem('loopback-token');
+  if (token) http.setToken(JSON.parse(token), false);
+}
+
 const http = axios.create({
   baseURL: 'http://' + host + ':' + port + restApiRoot,
 });
 
-http.setToken = token => {
-  http.defaults.headers.common['Authorization'] = token;
+http.setToken = (token, save = true) => {
+  http.token = token;
+  http.defaults.headers.common['Authorization'] = token.id;
+  if (save) exportTokenToLocalStorage(token);
 };
 
 http.removeToken = () => {
   delete http.defaults.headers.common.Authorization;
+  removeTokenFromLocalStorage();
 };
 
 http.find = (endpoint, filter) => http.get(endpoint, {params: {filter}});
@@ -32,6 +60,9 @@ const interceptResponse = res => {
 };
 http.interceptors.response.use(interceptResponse, interceptErrors);
 
+// Set storage Token in http if exists
+addTokenFromLocalStorage(http);
+
 export default http;
 
 // Documentation: https://github.com/axios/axios

template/client/store/modules/auth/actions.js

@@ -1,6 +1,42 @@
 import loopback from '@/services/loopback';
 import router from '@/router.js';
 
+/**
+ * Sync loopback token with current state
+*/
+export function syncToken({ commit, dispatch }) {
+  if (loopback.token) {
+    commit('setAccessToken', loopback.token);
+    dispatch('loadAccount', loopback.token.userId);
+  }
+}
+
+/**
+ * Sync router for auth
+ */
+export function syncRouter({ state, dispatch }, router) {
+  dispatch('syncToken');
+
+  router.beforeEach((to, from, next) => {
+    if (to.matched.some(record => record.meta.requiresAuth)) {
+      // this route requires auth, check if logged in
+      // if not, redirect to login page (except when it's profile route and
+      // there is an access_token).
+      if (to.name === 'profile' && to.query.access_token) {
+        next();
+      } else if (!state.access_token) {
+        next({
+          name: 'login',
+        });
+      } else {
+        next();
+      }
+    } else {
+      next(); // make sure to always call next()!
+    }
+  });
+}
+
 /**
  * Sign-in account with email and password (stores in state.account)
  * @param  {Function} commit   commit mutations function
@@ -16,6 +52,14 @@ export function signIn({commit, dispatch, state}, {email, password}) {
    })
    .then(token => {
      commit('setAccessToken', token);
+
+     // Update Loopback Token
+     if (state.access_token !== null) {
+       loopback.setToken(state.access_token);
+     } else {
+       loopback.removeToken();
+     }
+
      router.push({name: 'dashboard'});
      return dispatch('loadAccount', state.access_token.userId);
    });
@@ -32,6 +76,7 @@ export function signOut({commit}) {
     .post('/Accounts/logout')
     .then(() => {
       commit('setAccessToken', null);
+      loopback.removeToken();
       router.push({name: 'login'});
     });
 }

template/client/store/modules/auth/mutations.js

@@ -1,13 +1,6 @@
-import loopback from '@/services/loopback';
-
 export function setAccessToken(state, token) {
   // eslint-disable-next-line camelcase
-  state.access_token = token;
-  if (state.access_token !== null) {
-    loopback.setToken(state.access_token.id);
-  } else {
-    loopback.removeToken();
-  }
+  state.access_token = token
 }
 
 export function setAccount(state, account) {