Move login to the store

Author: shentao

server.js

@@ -18,7 +18,7 @@ app.get("/protected", verifyToken, (req, res) => {
   //Do we want to do this async or not?
   jwt.verify(req.token, "the_secret_key", err => {
     if (err) {
-      res.sendStatus(403);
+      res.sendStatus(401);
     } else {
       res.json({
         message: "You've successly accessed a protected route!"
@@ -61,7 +61,7 @@ function verifyToken(req, res, next) {
     req.token = bearerToken;
     next();
   } else {
-    res.sendStatus(403);
+    res.sendStatus(401);
   }
 }
 

src/main.js

@@ -2,6 +2,7 @@ import Vue from "vue";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
+import axios from "axios";
 
 Vue.config.productionTip = false;
 
@@ -16,5 +17,18 @@ new Vue({
 
       this.$store.commit("setUserData", userData);
     }
+
+    axios.interceptors.response.use(
+      response => response,
+      error => {
+        console.log(error.response);
+        if (error.response.status === 401) {
+          // Do something with response error
+          this.$router.push("/login");
+          this.$store.commit("logout");
+        }
+        return Promise.reject(error);
+      }
+    );
   }
 }).$mount("#app");

src/router.js

@@ -5,7 +5,7 @@ import Dashboard from "./views/Dashboard.vue";
 
 Vue.use(Router);
 
-export default new Router({
+const router = new Router({
   mode: "history",
   base: process.env.BASE_URL,
   routes: [
@@ -30,3 +30,18 @@ export default new Router({
     }
   ]
 });
+
+router.beforeEach((to, from, next) => {
+  // redirect to login page if not logged in and trying to access a restricted page
+  const publicPages = ["/login", "/"];
+  const authRequired = !publicPages.includes(to.path);
+  const loggedIn = localStorage.getItem("user");
+
+  if (authRequired && !loggedIn) {
+    return next("/login");
+  }
+
+  next();
+});
+
+export default router;

src/store.js

@@ -19,10 +19,15 @@ export default new Vuex.Store({
     logout() {
       localStorage.removeItem("user");
       location.reload();
-      // or
-      // axios.defaults.headers.common["Authorization"] = "";
-      // state.user = null;
     }
   },
-  actions: {}
+  actions: {
+    login({ commit }, credentials) {
+      return axios
+        .post("//localhost:3000/login", credentials)
+        .then(({ data }) => {
+          commit("setUserData", data);
+        });
+    }
+  }
 });

src/views/Dashboard.vue

@@ -11,7 +11,7 @@ import axios from "axios";
 export default {
   data() {
     return {
-      message: "NO MESSAGE"
+      message: "Loading..."
     };
   },
   created() {

src/views/Login.vue

@@ -20,13 +20,12 @@ export default {
   },
   methods: {
     login() {
-      axios
-        .post("//localhost:3000/login", {
+      this.$store
+        .dispatch("login", {
           email: this.email,
           password: this.password
         })
-        .then(({ data }) => {
-          this.$store.commit("setUserData", data);
+        .then(() => {
           this.$router.push("/dashboard");
         });
     }