...
const history = require("connect-history-api-fallback");
...
app.use(history());
...

app.use(history({
  rewrites: [
    {
      from: /^\/api\/.*$/,
      to: (context) => context.parsedUrl.pathname
    }
  ]
}));

module.exports = [
  {
    id: 1,
    username: "admin",
    password: "$2b$10$JSxCrnRLV1Ypc6P.thx29O4M1hePOyBX4V8hGn0yXOl2FRq5996oi", // admin
    displayName: "Administrator",
    roles: ["admin"]
  },
  {
    id: 2,
    username: "user",
    password: "$2b$10$KRW4hJpiDt3BIusPY2bQNOrKh7QuxWT8m2YSt9Q9b.aixSPv.tCDG", // user
    displayName: "User One",
    roles: ["user"]
  },
  ...
];

const bcrypt = require("bcryptjs");
const jwt = require("jsonwebtoken");
const jwtSecretKey = "gJ3Lck9rb5yZ6T8i66dcsuFeoYJ6x";
const users = require("./users.data");

exports.authenticate = (username, password) => {
  return new Promise((resolve, reject) => {
    if (typeof username !== "string" || typeof password !== "string") {
      reject(new Error("Username or password is incorrect"));
    }

    const user = users.find(
      u => u.username === username && validPassword(password, u.password)
    );

    if (!user) {
      reject(new Error("Username or password is incorrect"));
    }

    const token = jwt.sign(
      {
        id: user.id,
        username: user.username,
        roles: user.roles
      },
      jwtSecretKey,
      { expiresIn: "12h" }
    );

    resolve({
      id: user.id,
      displayName: user.displayName,
      roles: user.roles,
      token: token
    });
  });
};

exports.jwtVerify = (token) => {
  if (!token) {
    throw new Error("Authentication failed");
  }
  let payload;

  try {
    payload = jwt.verify(token, jwtSecretKey);
  } catch (err) {
    if (err.name === "TokenExpiredError") {
      throw new Error("Token Expired");
    } else {
      throw new Error("Authentication failed");
    }
  }
  return payload;
};

exports.allUsers = () => {
  return new Promise((resolve, reject) => {
    let rows = users.map(u => ({
      id: u.id,
      username: u.username,
      displayName: u.displayName,
      roles: u.roles
    }));

    resolve(rows);
  });
};

exports.findById = (id) => {
  return new Promise((resolve, reject) => {
    if (!id) {
      reject(new Error("User not found"));
    }

    const user = users.find(x => x.id === id);

    if (!user) {
      reject(new Error("User not found"));
    }

    resolve({
      id: user.id,
      username: user.username,
      displayName: user.displayName,
      roles: user.roles
    });
  });
};

exports.findRole = (role, roles) => {
  if (!roles || roles.indexOf(role) == -1) {
    return false;
  }
  return true;
};

exports.setPassword = password => {
  return bcrypt.hashSync(password, 10);
};

const validPassword = (password, hash) => {
  return bcrypt.compareSync(password, hash);
};

const { jwtVerify, findRole } = require("../services/user.service");

exports.authorize = (role) => {
  return [ validateToken(), isRole(role) ];
}

exports.isCurrentUser = () => {
  return [ validateToken(), currentUser() ];
};

function validateToken() {
  return (req, res, next) => {
    let token;
    let payload;

    if (!req.headers.authorization) {
      return res.status(401).json({ message: "You are not authorized" });
    }

    token = req.headers.authorization.split(" ")[1];

    if (!token) {
      return res.status(401).json({ message: "You are not authorized" });
    }

    try {
      payload = jwtVerify(token);
      req.currentUser = payload;
      next();
    } catch (err) {
      if (err.name === "TokenExpiredError") {
        return res.status(401).json({ message: err.message });
      } else {
        return res.status(401).json({ message: err.message });
      }
    }
  };
}

function isRole(role) {
  return (req, res, next) => {
    if (!req.currentUser) {
      return res.status(401).json({ message: "You are not authorized" });
    }

    if (!role || findRole(role, req.currentUser.roles)) {
      next();
    } else {
      res.status(401).json({ message: "You are not authorized" });
    }
  }
}

function currentUser() {
  return (req, res, next) => {
    if (!req.currentUser) {
      return res.status(401).json({ message: "You are not authorized" });
    }
    let id = !isNaN(req.params.id) ? parseInt(req.params.id) : undefined;

    if (id === req.currentUser.id || findRole("admin", req.currentUser.roles)) {
      next();
    } else {
      res.status(401).json({ message: "You are not authorized" });
    }
  };
}

function myMiddleware(request, response, next) {
  ...
  next();
}

const { authenticate, allUsers, findById } = require("../services/user.service");

exports.allUsers = (req, res, next) => {
  allUsers()
    .then( users => res.status(200).json( { items: users }))
    .catch(err => res.status(404).json({ message: err.message }));
};

exports.getUser = (req, res, next) => {
  const id = !isNaN(req.params.id) ? parseInt(req.params.id) : undefined;

  findById(id)
    .then(user => res.status(200).json(user))
    .catch(err => res.status(404).json({ message: err.message }));
};

exports.authenticate = (req, res, next) => {
  const username = req.body.username;
  const password = req.body.password;

  authenticate(username, password)
    .then(user => res.status(200).json(user))
    .catch(err => res.status(401).json({ message: err.message }));
};

const express = require('express');
const router = express.Router();
const { allUsers, getUser, authenticate } = require('../controllers/user.controller');
const { authorize, isCurrentUser } = require('../middlewares/authorize');

router.get('/',  authorize('admin'), allUsers);

router.get("/:id", isCurrentUser(), getUser);

router.post("/authenticate", authenticate);

module.exports = router;

const createError = require('http-errors');
const express = require('express');
const path = require('path');
const cookieParser = require('cookie-parser');
const logger = require('morgan');
const cors = require('cors');
const history = require("connect-history-api-fallback");

const indexRouter = require('./routes/index');
const usersRouter = require('./routes/users');

const app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(logger('dev'));
app.use(express.json());
app.use(history({
  rewrites: [
    {
      from: /^\/api\/.*$/,
      to: (context) => context.parsedUrl.pathname
    }
  ]
}));
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(cors());

app.use('/', indexRouter);
app.use('/api/v1/users', usersRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

const _helpers = (() => {
  const config = {
    apiUrl: `http://${location.host}/api/v1`
  };

  function handleResponse(response) {
    return response.text().then(text => {
      const data = text && JSON.parse(text);
      if (!response.ok) {
        if ([401, 403].indexOf(response.status) !== -1) {
          authenticationService.logout();
          //location.reload(true);
        }
        const error = (data && data.message) || response.statusText;
        return Promise.reject(error);
      }
      return data;
    });
  }

  const requestOptions = {
    get() {
      return {
        method: "GET",
        ...headers()
      };
    },
    post(body) {
      return {
        method: "POST",
        ...headers(),
        body: JSON.stringify(body)
      };
    },
    patch(body) {
      return {
        method: "PATCH",
        ...headers(),
        body: JSON.stringify(body)
      };
    },
    put(body) {
      return {
        method: "PUT",
        ...headers(),
        body: JSON.stringify(body)
      };
    },
    delete() {
      return {
        method: "DELETE",
        ...headers()
      };
    }
  };

  function headers() {
    const currentUser = authenticationService.currentUserValue || {};
    const authHeader = currentUser.token
      ? { Authorization: "Bearer " + currentUser.token }
      : {};
    return {
      headers: {
        ...authHeader,
        "Content-Type": "application/json"
      }
    };
  }

  return {
    config,
    requestOptions,
    handleResponse,
  };
})();

const authenticationService = (() => {
  const { BehaviorSubject } = rxjs;
  const { config, requestOptions, handleResponse } = _helpers;

  const currentUserSubject = new BehaviorSubject(
    JSON.parse(localStorage.getItem("currentUser"))
  );

  function login(username, password) {
    return fetch(`${config.apiUrl}/users/authenticate`,
      requestOptions.post({ username, password })
    ).then(handleResponse)
     .then(user => {
        if (user.roles && Array.isArray(user.roles)) {
          user.isAdmin = user.roles.indexOf("admin") !== -1 ? true : false;
        }
        localStorage.setItem("currentUser", JSON.stringify(user));
        currentUserSubject.next(user);

        return user;
      });
  }

  function logout() {
    localStorage.removeItem("currentUser");
    currentUserSubject.next(null);
  }

  return {
    login,
    logout,
    currentUser: currentUserSubject.asObservable(),
    get currentUserValue() { return currentUserSubject.value; }
  };
})();

const userService = (() => {
  const { config, requestOptions, handleResponse } = _helpers;

  function getAll() {
    return fetch(`${config.apiUrl}/users`, requestOptions.get()).then(
      handleResponse
    );
  }

  function getById(id) {
    return fetch(`${config.apiUrl}/users/${id}`, requestOptions.get()).then(
      handleResponse
    );
  }

  return {
    getAll,
    getById
  }
})();

const router = new VueRouter({
  mode: "history",
  routes: [
    {
      path: "/",
      name: "home",
      component: HomePage
    },
    {
      path: "/account",
      name: "account",
      component: AccountPage,
      meta: {
        requiresAuth: true
      }
    },
    {
      path: "/user",
      name: "user",
      component: UserPage,
      meta: {
        requiresAuth: true
      }
    },
    {
      path: "/login",
      name: "login",
      component: LoginPage
    },
    {
      path: "/about",
      name: "about",
      component: AboutPage
    },
    {
      path: "*",
      component: PageNotFound
    }
  ]
});

router.beforeEach((to, from, next) => {
  const currentUser = authenticationService.currentUserValue;
  const requiresAuth = to.matched.some((record) => {
    return record.meta.requiresAuth;
  });

  if (requiresAuth && !currentUser) {
    next({ path: "/login", query: { returnUrl: to.path } });
  } else {
    next();
  }
});

const App = {
  name: "App",
  components: {},
  template: `
  <v-app>
    <v-app-bar :clipped-left="$vuetify.breakpoint.lgAndUp" app >
      <v-toolbar-title class="headline ml-0 pl-4" >
        <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
        <span class="hidden-sm-and-down">Uni-President</span>
      </v-toolbar-title>
      <div class="flex-grow-1"></div>
      <v-toolbar-items>
        <v-btn color="indigo" tile text to="/">
          <v-icon>mdi-home</v-icon>
          <span class="mr-2 green--text text--accent-4 hidden-sm-and-down">Home</span>
        </v-btn>
        <v-btn color="amber" tile text to="/about">
          <v-icon>mdi-information</v-icon>
          <span class="mr-2 hidden-sm-and-down">About</span>
        </v-btn>
        <v-menu bottom left>
          <template v-slot:activator="{ on }">
            <v-btn icon color="teal" v-on="on">
              <v-icon>mdi-dots-vertical</v-icon>
            </v-btn>
          </template>
          <v-list dense>
            <v-list-item v-for="item in items" :key="item.title" link :to="item.to">
              <v-list-item-icon>
                <v-icon>{{ item.icon }}</v-icon>
              </v-list-item-icon>
              <v-list-item-content>
                <v-list-item-title>{{ item.title }}</v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-list>
        </v-menu>
      </v-toolbar-items>
    </v-app-bar>
    <v-content>
      <v-container>
        <router-view />
      </v-container>
    </v-content>
    <v-footer app>
      <small class="grey--text">&copy; 2019</small>
    </v-footer>
    <v-navigation-drawer v-model="drawer" :clipped="$vuetify.breakpoint.lgAndUp" app>
      <v-list-item>
        <v-list-item-avatar>
          <v-img src="images/pec_logo.png"></v-img>
        </v-list-item-avatar>
        <v-list-item-content>
          <v-list-item-title class="red--text text--darken-2">
            Uni-President
          </v-list-item-title>
        </v-list-item-content>
      </v-list-item>
      <v-divider></v-divider>
      <v-list dense>
        <v-list-item v-for="item in selectedItems" :key="item.title" link :to="item.to">
          <v-list-item-icon>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
        <v-divider class="my-3"></v-divider>
        <v-list-item v-if="!currentUser" link to="/login">
          <v-list-item-icon>
            <v-icon>mdi-login</v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title>Login</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
        <v-list-item v-else @click="logout">
          <v-list-item-icon>
            <v-icon>mdi-logout</v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title>Logout <span class="blue--text text--darken-2">({{ currentUser && currentUser.displayName }})</span></v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
  </v-app>`,

  data: () => ({
    currentUser: null,
    drawer: null,
    items: [
      { title: "Home", icon: "mdi-view-dashboard", to: "/" },
      { title: "About", icon: "mdi-forum", to: "/about" },
      { title: "Account", icon: "mdi-account-card-details", to: "/account" },
      { title: "Not Exists", icon: "mdi-forum", to: "/not/exists" }
    ],
    adminItems: [
      { title: "User", icon: "mdi-account-card-details", to: "/user" }
    ]
  }),
  computed: {
    selectedItems() {
      if (!this.currentUser || !this.currentUser.isAdmin) {
        return this.items;
      }
      return [...this.items, ...this.adminItems];
    }
  },
  methods: {
    logout() {
      authenticationService.logout();
      router.push("/login");
    }
  },
  created() {
    authenticationService.currentUser.subscribe(x => (this.currentUser = x));
  }
};

const LoginPage = {
  name: "LoginPage",
  template: `
  <v-container class="fill-height" fluid>
    <v-row align="center" justify="center">
      <v-col cols="12" sx="12" sm="8" md="4">
        <v-card class="elevation-12">
          <v-toolbar flat >
            <v-img src="images/pec_logo.png" max-width="45"></v-img>
            <v-toolbar-title class="red--text text--darken-2 ml-5">
              Uni-President
            </v-toolbar-title>
          </v-toolbar>
          <v-card-text>
            <v-form v-model="valid">
              <v-text-field
                  v-model="username"
                  :rules="[rules.required, rules.min]"
                  label="Username"
                  name="username"
                  prepend-icon="mdi-account"
                  hint="Username is required"
              ></v-text-field>
              <v-text-field
                v-model="password"
                prepend-icon="mdi-lock"
                :append-icon="show ? 'mdi-eye' : 'mdi-eye-off'"
                :rules="[rules.required, rules.min]"
                :type="show ? 'text' : 'password'"
                name="password"
                label="Password"
                hint="Password is required"
                @click:append="show = !show"
              ></v-text-field>
            </v-form>
          </v-card-text>
          <v-card-actions>
            <div class="flex-grow-1"></div>
            <v-btn :disabled="!valid || loading"
                   color="blue" block large
                   @click="handleSubmit"
            >Login</v-btn>
          </v-card-actions>
        </v-card>
      </v-col>
      <v-col cols="12" sx="12" sm="12" md="12">
        <v-alert v-if="error" type="error"> {{ error }} </v-alert>
      </v-col>
    </v-row>
  </v-container>
`,
  props: {
    source: String
  },
  data: () => ({
    valid: true,
    show: false,
    username: "",
    password: "",
    rules: {
      required: value => !!value || "Required.",
      min: v => v.length >= 4 || "Min 4 characters"
    },
    loading: false,
    returnUrl: "",
    error: ""
  }),
  created() {
    if (authenticationService.currentUserValue) {
      return router.push("/");
    }

    this.returnUrl = this.$route.query.returnUrl || "/";
  },
  methods: {
    handleSubmit(e) {
      this.loading = true;
      authenticationService.login(this.username, this.password).then(
        user => router.push(this.returnUrl),
        error => {
          this.error = error;
          this.loading = false;
        }
      );
    }
  }
};

{
  path: "/user",
  name: "user",
  component: UserPage,
  meta: {
    requiresRole: 'admin' 
  }
}

Vue.component("ListUsers", {
  template: `
  <div>
    <div if="currentUser && currentUser.isAdmin">
      <v-card class="mx-auto" max-width="344" tile >
        <v-list dense>
          <v-subheader class="title teal--text text--darken-1">Users</v-subheader>
          <em v-if="users.loading">Loading users...</em>
          <span v-if="users.error" class="red--text">ERROR: {{ users.error }}</span>
          <v-list-item-group color="primary">
            <v-list-item  v-for="item in users.items" :key="item.displayName" >
               <v-list-item-icon>
                <v-icon color="blue" v-text="'mdi-account'"></v-icon>
              </v-list-item-icon>
              <v-list-item-content>
                <v-list-item-title v-text="item.displayName"></v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-list-item-group>
        </v-list>
      </v-card>
    </div>
  </div>`,

  data: () => ({
    currentUser: authenticationService.currentUserValue,
    users: [],
  }),
  created() {
    if (this.currentUser && this.currentUser.isAdmin) {
      userService.getAll().then(users => this.users = users);
    }
  }
});

const UserPage = {
  name: "UserPage",
  template: `
  <div>
    <v-row>
      <v-col>
        <v-card max-width="344" class="mx-auto">
          <v-card-title>I'm {{ currentUser && currentUser.displayName }}</v-card-title>
          <v-card-text>Some text</v-card-text>
        </v-card>
      </v-col>
      <v-col v-if="currentUser && currentUser.isAdmin">
        <ListUsers />
      </v-col>
    </v-row>
  </div>`,
  data: () => ({
    currentUser: authenticationService.currentUserValue
  })
};

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="stylesheets/@mdi/font/css/materialdesignicons.min.css" rel="stylesheet" />
  <link href="stylesheets/vuetify.min.css" rel="stylesheet" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  <style>
  [v-cloak] {
    display: none;
  }
</style>
</head>
<body>
  <div id="app" v-cloak></div>

  <script src="libs/vue.js"></script>
  <script src="libs/vuetify.js"></script>
  <script src="libs/vue-router.js"></script>
  <script src="libs/rxjs.umd.min.js"></script>
  <script src="javascripts/views/HomePage.vue.js"></script>
  <script src="javascripts/views/LoginPage.vue.js"></script>
  <script src="javascripts/views/AboutPage.vue.js"></script>
  <script src="javascripts/components/ListUsers.vue.js"></script>
  <script src="javascripts/views/AccountPage.vue.js"></script>
  <script src="javascripts/views/UserPage.vue.js"></script>
  <script src="javascripts/views/PageNotFound.vue.js"></script>
  <script src="javascripts/helpers/helpers.js"></script>
  <script src="javascripts/services/authentication.service.js"></script>
  <script src="javascripts/services/user.service.js"></script>
  <script src="App.vue.js"></script>
  <script src="router.js"></script>
  <script src="main.js"></script>
</body>
</html>

<script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
      data: {
        message: "Hello Tainan! 就從這裡開始!"
      }
    })
  </script>

<script>
  const HomePage = { template: '<div>This is Home Page</div>' };
  const AboutPage = { template: '<div>This is About Page</div>' };

  const routes = [
    { path: '/', component: HomePage },
    { path: '/about', component: AboutPage }
  ];

  const router = new VueRouter({
    routes
  });

  new Vue({
    el: "#app",
    vuetify: new Vuetify(),
    router,
    data: {
      message: "Hello Tainan! 就從這裡開始!"
    }
  });
</script>

const HomePage = {
  name: "HomePage",
  template: `
  <div>
    <h1 class="display-1">This is Home Page</h1>
  </div>`
};

const AboutPage = {
  name: "AboutPage",
  template: `
  <div>
    <h1 class="display-1">This is About Page</h1>
  </div>`
};

const PageNotFound = {
  name: "PageNotFound",
  template: `
  <div>
    <h1>404 Page Not Found</h1>
  </div>`
};

const router = new VueRouter({
  mode: "history",
  routes: [
    {
      path: "/",
      name: "home",
      component: HomePage
    },
    {
      path: "/about",
      name: "about",
      component: AboutPage
    },
    {
      path: "*",
      component: PageNotFound
    }
  ]
});

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  router,
  data: {
    message: "Hello Tainan! 就從這裡開始!"
  }
});

const HomePage = {
  name: "HomePage",
  template: `
  <div>
    <h1 class="display-1">This is Home Page</h1>
    <v-icon large color="red">mdi-home</v-icon>
  </div>`
};

const App = {
  name: "App",
  components: {},
  template: `
  <v-app>
    <v-app-bar :clipped-left="$vuetify.breakpoint.lgAndUp" app >
      <v-toolbar-title class="headline ml-0 pl-4" >
        <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
        <span class="hidden-sm-and-down">Uni-President</span>
      </v-toolbar-title>
      <div class="flex-grow-1"></div>
      <v-toolbar-items>
        <v-btn color="indigo" tile text to="/">
          <v-icon>mdi-home</v-icon>
          <span class="mr-2 green--text text--accent-4 hidden-sm-and-down">Home</span>
        </v-btn>
        <v-btn color="amber" tile text to="/about">
          <v-icon>mdi-information</v-icon>
          <span class="mr-2 hidden-sm-and-down">About</span>
        </v-btn>
        <v-menu bottom left>
          <template v-slot:activator="{ on }">
            <v-btn icon color="teal" v-on="on">
              <v-icon>mdi-dots-vertical</v-icon>
            </v-btn>
          </template>
          <v-list dense>
            <v-list-item v-for="item in items" :key="item.title" link :to="item.to">
              <v-list-item-icon>
                <v-icon>{{ item.icon }}</v-icon>
              </v-list-item-icon>
              <v-list-item-content>
                <v-list-item-title>{{ item.title }}</v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-list>
        </v-menu>
      </v-toolbar-items>
    </v-app-bar>
    <v-content>
      <v-container>
        <router-view />
      </v-container>
    </v-content>
    <v-footer app>
      <small class="grey--text">&copy; 2019</small>
    </v-footer>
    <v-navigation-drawer v-model="drawer" :clipped="$vuetify.breakpoint.lgAndUp" app>
      <v-list-item>
        <v-list-item-avatar>
          <v-img src="images/pec_logo.png"></v-img>
        </v-list-item-avatar>
        <v-list-item-content>
          <v-list-item-title class="red--text text--darken-2">
            Uni-President
          </v-list-item-title>
        </v-list-item-content>
      </v-list-item>
      <v-divider></v-divider>
      <v-list dense>
        <v-list-item v-for="item in items" :key="item.title" link :to="item.to">
          <v-list-item-icon>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
  </v-app>`,

  data: () => ({
    drawer: null,
    items: [
      { title: "Home", icon: "mdi-view-dashboard", to: "/" },
      { title: "About", icon: "mdi-forum", to: "/about" },
      { title: "Not Exists", icon: "mdi-forum", to: "/not-exists" }
    ]
  })
};

new Vue({
  vuetify: new Vuetify(),
  router,
  render: h => h(App)
}).$mount("#app");