commit 6ce1a07cd07b47b883e840fb34b081146bc92b6d
author Yoshie Muranaka <yoshiemuranaka@gmail.com> Fri Dec 06 14:13:59 2019 -0800
committer Derick Montague <derick.montague@ibm.com> Mon Jan 27 08:37:36 2020 -0600
tree e1f449f31de2d89bb0c29f11e29fbfcbab481be3
parent 463a57062a1e1f91743e53acb27e867fc4c7584c

Add cookie based login authentication

- Changed POST request data structure to match
  backend requirements for set-cookie in response
  header
- Added withCredentials property to default
  axios config
- Modifying proxied response to remove 'Secure' flag
  so browser can create Cookie while running locally
- Add logout api request
- Add js-cookie package to manage browser cookies
- Update the babel preset config to include useBuiltIns,
which resolves MIME type errors when overlaying
- Disable vue-router history mode to use routher hash mode
to resolves 404 errors when refreshing certain pages. This
is expected behavior with history mode enabled. Server
configuration changes are required to support HTML5
history mode: https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I5d43f36ef546962474b6cc8fff89564f29048fde

src/router/index.js

diff --git a/src/router/index.js b/src/router/index.js
index 560da89..9c80234 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -42,7 +42,6 @@
 ];
 
 const router = new VueRouter({
-  mode: "history",
   base: process.env.BASE_URL,
   routes,
   linkExactActiveClass: "nav__link--current"

src/store/api.js

diff --git a/src/store/api.js b/src/store/api.js
index 39a6355..c50bcbe 100644
--- a/src/store/api.js
+++ b/src/store/api.js
@@ -1,6 +1,8 @@
 import Axios from "axios";
 
-const api = Axios.create();
+const api = Axios.create({
+  withCredentials: true
+});
 
 // TODO: Permanent authentication solution
 // Using defaults to set auth for sending

src/store/modules/Authentication/AuthenticanStore.js

diff --git a/src/store/modules/Authentication/AuthenticanStore.js b/src/store/modules/Authentication/AuthenticanStore.js
index 828c3cc..3512e2d 100644
--- a/src/store/modules/Authentication/AuthenticanStore.js
+++ b/src/store/modules/Authentication/AuthenticanStore.js
@@ -1,54 +1,48 @@
 import api from "../../api";
+import Cookies from "js-cookie";
 
 const AuthenticationStore = {
   namespaced: true,
   state: {
-    auth: {},
     status: "",
-    token: sessionStorage.getItem("token") || ""
+    cookie: Cookies.get("XSRF-TOKEN")
   },
   getters: {
     authStatus: state => state.status,
-    isLoggedIn: state => !!state.token
+    isLoggedIn: state => !!state.cookie
   },
   mutations: {
     authRequest(state) {
       state.status = "loading";
     },
-    authSuccess(state, token, auth) {
-      state.status = "authenicated";
-      state.auth = auth;
-      state.token = token;
+    authSuccess(state) {
+      state.status = "authenticated";
+      state.cookie = Cookies.get("XSRF-TOKEN");
     },
     authError(state) {
       state.status = "error";
     },
     logout(state) {
       state.status = "";
-      state.token = "";
+      Cookies.remove("XSRF-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);
-        })
+        .post("/login", { data: auth })
+        .then(() => commit("authSuccess"))
         .catch(error => {
           commit("authError");
-          sessionStorage.removeItem("token");
           throw new Error(error);
         });
     },
     logout({ commit }) {
-      commit("logout");
-      sessionStorage.removeItem("token");
-      api.defaults.auth = {}; // Permanent solution
+      api
+        .post("/logout", { data: [] })
+        .then(() => commit("logout"))
+        .catch(error => console.log(error));
     }
   }
 };

src/views/Login/Login.vue

diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index f122d28..7914ea6 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -59,7 +59,7 @@
       const username = this.username;
       const password = this.password;
       this.$store
-        .dispatch("authentication/login", { username, password })
+        .dispatch("authentication/login", [username, password])
         .then(() => this.$router.push("/"))
         .catch(error => console.log(error));
     }