Naive login implementation

Author: shentao

package.json

@@ -8,6 +8,9 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.18.0",
+    "body-parser": "^1.18.3",
+    "cors": "^2.8.5",
     "express": "^4.16.4",
     "jsonwebtoken": "^8.4.0",
     "vue": "^2.5.22",

server.js

@@ -1,8 +1,13 @@
 var express = require("express");
 var jwt = require("jsonwebtoken");
+var cors = require("cors");
+var bodyParser = require("body-parser");
 
 const app = express();
 
+app.use(cors());
+app.use(bodyParser.json());
+
 app.get("/", (req, res) => {
   res.json({
     message: "Welcome to the API."
@@ -11,26 +16,36 @@ app.get("/", (req, res) => {
 
 app.get("/protected", verifyToken, (req, res) => {
   //Do we want to do this async or not?
-  jwt.verify(req.token, "the_secret_key"),
-    (err, authData) => {
-      if (err) {
-        res.sendStatus(403);
-      } else {
-        res.json({
-          message: "You've successly accessed a protected route!",
-          authData
-        });
-      }
-    };
+  jwt.verify(req.token, "the_secret_key", err => {
+    if (err) {
+      res.sendStatus(403);
+    } else {
+      res.json({
+        message: "You've successly accessed a protected route!"
+      });
+    }
+  });
 });
 
 app.post("/login", (req, res) => {
   // Are we fine with just faking out a user?
-  const user = { name: "Nancy Usery", email: "nancy@gmail.com", id: 4321 };
-  const token = jwt.sign({ user }, "the_secret_key");
-  res.json({
-    token
-  });
+  const user = {
+    email: "nancy@gmail.com",
+    password: "pass123"
+  };
+  if (
+    req.body &&
+    req.body.email === user.email &&
+    req.body.password === user.password
+  ) {
+    const token = jwt.sign({ user }, "the_secret_key");
+    res.json({
+      token,
+      email: user.email
+    });
+  } else {
+    res.sendStatus(401);
+  }
 });
 
 function verifyToken(req, res, next) {
@@ -40,6 +55,7 @@ function verifyToken(req, res, next) {
   if (typeof bearerHeader !== "undefined") {
     const bearer = bearerHeader.split(" ");
     const bearerToken = bearer[1];
+
     req.token = bearerToken;
     next();
   } else {

src/App.vue

@@ -2,7 +2,8 @@
   <div id="app">
     <div id="nav">
       <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
+      <router-link to="/login">Login</router-link> |
+      <router-link to="/dashboard">Dashboard</router-link>
     </div>
     <router-view />
   </div>

src/router.js

@@ -1,6 +1,7 @@
 import Vue from "vue";
 import Router from "vue-router";
 import Home from "./views/Home.vue";
+import Dashboard from "./views/Dashboard.vue";
 
 Vue.use(Router);
 
@@ -14,13 +15,18 @@ export default new Router({
       component: Home
     },
     {
-      path: "/about",
-      name: "about",
+      path: "/dashboard",
+      name: "dashboard",
+      component: Dashboard
+    },
+    {
+      path: "/login",
+      name: "login",
       // route level code-splitting
       // this generates a separate chunk (about.[hash].js) for this route
       // which is lazy-loaded when the route is visited.
       component: () =>
-        import(/* webpackChunkName: "about" */ "./views/About.vue")
+        import(/* webpackChunkName: "about" */ "./views/Login.vue")
     }
   ]
 });

src/views/About.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="dashboard">
+    <h1>Dashboard</h1>
+    {{ message }}
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+  data() {
+    return {
+      message: "NO MESSAGE"
+    };
+  },
+  created() {
+    const userString = localStorage.getItem("user");
+    if (userString) {
+      const token = JSON.parse(userString).token;
+      axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
+
+      axios.get("//localhost:3000/protected").then(({ data }) => {
+        this.message = data.message;
+      });
+    }
+  }
+};
+</script>

src/views/Dashboard.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="about">
+    <form @submit.prevent="login">
+      <input v-model="email" type="email" name="email" value="" />
+      <input v-model="password" type="password" name="" value="" />
+      <button type="submit" name="button">Login</button>
+    </form>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+  data() {
+    return {
+      email: "",
+      password: ""
+    };
+  },
+  methods: {
+    login() {
+      axios
+        .post("//localhost:3000/login", {
+          email: this.email,
+          password: this.password
+        })
+        .then(({ data }) => {
+          localStorage.setItem("user", JSON.stringify(data));
+          axios.defaults.headers.common["Authorization"] = `Bearer ${
+            data.token
+          }`;
+          this.$router.push("/dashboard");
+        });
+    }
+  }
+};
+</script>