commit e080a1a7593e83a49d623ffdd452fd0e1c617889
author Derick Montague <derick.montague@ibm.com> Wed Dec 04 16:30:08 2019 -0600
committer Derick Montague <derick.montague@ibm.com> Wed Jan 22 17:44:50 2020 -0600
tree bb94dee85cae80a3f54f4fbcf1d816f304129e67
parent 186ce2e407812f417aba7a2ee2ab6cae5d5f3b0e

Add login and logout functionality

- Add AuthenticationStore
- Add ability to login and logout
- Add route navigation guard
- Add login styles
- Add temporary authentication for api call
- Add Login directory
- Add index.js

In order to login a .env.development.local file that contains
BASE_URL="https://<ip address> or <FQDN>"

Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I88b93e287e66f4bae82a1ec2934cdef12d78264e

src/store/api.js

diff --git a/src/store/api.js b/src/store/api.js
index d40ad0a..39a6355 100644
--- a/src/store/api.js
+++ b/src/store/api.js
@@ -2,15 +2,9 @@
 
 const api = Axios.create();
 
-// TODO: this is a temporary workaround until
-// authentication with login is working
-const username = process.env.VUE_APP_USERNAME;
-const password = process.env.VUE_APP_PASSWORD;
-if (username && password) {
-  api.defaults.auth = {};
-  api.defaults.auth.username = username;
-  api.defaults.auth.password = password;
-}
+// TODO: Permanent authentication solution
+// Using defaults to set auth for sending
+// auth object in header
 
 export default {
   get(path) {
@@ -30,5 +24,6 @@
   },
   all(promises) {
     return Axios.all(promises);
-  }
+  },
+  defaults: api.defaults
 };

src/store/index.js

diff --git a/src/store/index.js b/src/store/index.js
index af06a47..b4be6cc 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,8 +1,9 @@
 import Vue from "vue";
 import Vuex from "vuex";
 
-import LocalUserManagementStore from "./modules/AccessControl/LocalUserMangementStore";
 import GlobalStore from "./modules/GlobalStore";
+import AuthenticationStore from "./modules/Authentication/AuthenticanStore";
+import LocalUserManagementStore from "./modules/AccessControl/LocalUserMangementStore";
 
 Vue.use(Vuex);
 
@@ -12,6 +13,7 @@
   actions: {},
   modules: {
     global: GlobalStore,
+    authentication: AuthenticationStore,
     localUsers: LocalUserManagementStore
   }
 });

src/store/modules/Authentication/AuthenticanStore.js

diff --git a/src/store/modules/Authentication/AuthenticanStore.js b/src/store/modules/Authentication/AuthenticanStore.js
new file mode 100644
index 0000000..828c3cc
--- /dev/null
+++ b/src/store/modules/Authentication/AuthenticanStore.js
@@ -0,0 +1,56 @@
+import api from "../../api";
+
+const AuthenticationStore = {
+  namespaced: true,
+  state: {
+    auth: {},
+    status: "",
+    token: sessionStorage.getItem("token") || ""
+  },
+  getters: {
+    authStatus: state => state.status,
+    isLoggedIn: state => !!state.token
+  },
+  mutations: {
+    authRequest(state) {
+      state.status = "loading";
+    },
+    authSuccess(state, token, auth) {
+      state.status = "authenicated";
+      state.auth = auth;
+      state.token = token;
+    },
+    authError(state) {
+      state.status = "error";
+    },
+    logout(state) {
+      state.status = "";
+      state.token = "";
+    }
+  },
+  actions: {
+    login({ commit }, auth) {
+      commit("authRequest");
+      return api
+        .post("/login", auth)
+        .then(response => {
+          const token = response.data.token;
+          sessionStorage.setItem("token", token);
+          api.defaults.auth = auth; // TODO Permanent Solution
+          commit("authSuccess", token, auth);
+        })
+        .catch(error => {
+          commit("authError");
+          sessionStorage.removeItem("token");
+          throw new Error(error);
+        });
+    },
+    logout({ commit }) {
+      commit("logout");
+      sessionStorage.removeItem("token");
+      api.defaults.auth = {}; // Permanent solution
+    }
+  }
+};
+
+export default AuthenticationStore;