Merge pull request #34 from clarkdo/nuxt-1.0.0

chore: code refacor

Author: clarkdo

.vscode/cSpell.json

@@ -22,7 +22,8 @@
         "tooltips",
         "chartjs",
         "contenthash",
-        "mixins"
+        "mixins",
+        "consts"
     ],
     // flagWords - list of words to be always considered incorrect
     // This is useful for offensive words and common spelling errors.

client/components/Navbar.vue

@@ -21,7 +21,7 @@
         </nuxt-link>
       </div>
     </el-menu>
-    <ul class="el-menu el-menu-demo el-menu--dark">
+    <ul v-else class="el-menu el-menu-demo el-menu--dark">
       <header>
           <img src="~assets/img/logo.svg" alt="Element">
       </header>
@@ -63,6 +63,8 @@ export default class Navbar extends Vue {
 <style lang="scss" scoped>
 .navbar {
   position: fixed;
+  overflow-y: auto;
+  overflow-x: hidden;
   width: 16.66667%;
   height: 100%;
   z-index: 9999;

client/pages/login.vue

@@ -80,11 +80,9 @@ export default class Login extends Vue {
       }
     })
   }
-  getCaptcha () {
-    axios.get('/hpi/captcha')
-      .then((res) => {
-        this.captchaSvg = res.data
-      })
+  async getCaptcha () {
+    const {data: captcha} = await axios.get('/hpi/captcha')
+    this.captchaSvg = captcha
   }
 
   refreshCaptcha = debounce(this.getCaptcha, 500)

client/store/index.js

@@ -36,32 +36,27 @@ export const getters = {
 export const actions = {
   nuxtServerInit ({ commit }, { req }) {
   },
-  login ({ commit }, { userName, password, captcha }) {
-    return axios.post('/hpi/login', {
-      userName,
-      password,
-      captcha
-    })
-      .then((res) => {
-        let token = res.data['access_token']
-        setToken(token)
-        commit('SET_USER', getUserFromToken(token))
-      })
-      .catch((error) => {
-        let message = error.message
-        if (error.response.data) {
-          message = (error.response.data.message || message)
-        }
-        throw new Error(message)
-      })
+  async login ({ commit }, { userName, password, captcha }) {
+    try {
+      const {data: {access_token: token}} = await axios.post(
+        '/hpi/login',
+        {userName, password, captcha}
+      )
+      setToken(token)
+      commit('SET_USER', getUserFromToken(token))
+    } catch (error) {
+      let message = error.message
+      if (error.response.data) {
+        message = (error.response.data.message || message)
+      }
+      throw new Error(message)
+    }
   },
-  logout ({ commit }, callback) {
-    return axios.post('/hpi/logout')
-      .then(() => {
-        commit('SET_USER', null)
-        unsetToken()
-        callback()
-      })
+  async logout ({ commit }, callback) {
+    await axios.post('/hpi/logout')
+    commit('SET_USER', null)
+    unsetToken()
+    callback()
   },
   toggleMenu ({ commit }) {
     commit('SET_MENU_HIDDEN')

client/utils/auth.js

@@ -2,8 +2,10 @@ import axios from 'axios'
 import cookie from 'cookie'
 import cookies from 'js-cookie'
 import jwtDecode from 'jwt-decode'
+import consts from '~/utils/consts'
 
 const inBrowser = typeof window !== 'undefined'
+const jwtKey = consts.COOKIE_JWT
 
 export const setToken = (token) => {
   if (process.SERVER_BUILD) return
@@ -12,14 +14,14 @@ export const setToken = (token) => {
     value: token,
     exp: exp
   }))
-  cookies.set('jwt', token, { expires: new Date(exp) })
+  cookies.set(jwtKey, token, { expires: new Date(exp) })
   setAuthHeader()
 }
 
 export const unsetToken = () => {
   if (process.SERVER_BUILD) return
   window.localStorage.removeItem('token')
-  cookies.remove('jwt')
+  cookies.remove(jwtKey)
   window.localStorage.setItem('logout', Date.now())
   setAuthHeader()
 }
@@ -45,7 +47,7 @@ export const getTokenFromSession = (req) => {
 export const getTokenFromCookie = (req) => {
   const cookieStr = inBrowser ? document.cookie : req.headers.cookie
   const cookies = cookie.parse(cookieStr || '') || {}
-  return cookies.jwt
+  return cookies[jwtKey]
 }
 
 export const getUserFromLocalStorage = () => {

client/utils/consts.js

@@ -0,0 +1,7 @@
+export default Object.freeze({
+  APP: 'hare',
+  API: 'hpi',
+  BASE_API: '/hpi',
+  SESS_KEY: 'hare:sess',
+  COOKIE_JWT: 'hare_jwt'
+})

server/api/routes-auth.js

@@ -5,14 +5,14 @@ import axios from 'axios'
 import querystring from 'querystring'
 import koaRouter from 'koa-router'
 import svgCaptcha from 'svg-captcha'
-import constants from '../utils/constants'
+import consts from '../utils/consts'
 
 const router = koaRouter({
-  prefix: constants.BASE_API
+  prefix: consts.BASE_API
 }) // router middleware for koa
 
 var request = axios.create({
-  baseURL: constants.LB_ADDR,
+  baseURL: consts.LB_ADDR,
   timeout: 5000,
   headers: {
     'Authorization': 'Basic YmFzLWNsaWVudDpYMmNYeW1nWkRrRkE3RWR0',

server/api/routes-demo.js

@@ -2,10 +2,10 @@
 /*  Route to handle authentication /auth element                                                  */
 /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
 import koaRouter from 'koa-router'
-import constants from '../utils/constants'
+import consts from '../utils/consts'
 
 const router = koaRouter({
-  prefix: constants.BASE_API
+  prefix: consts.BASE_API
 }) // router middleware for koa
 
 router.get('/activities', async function getActivities (ctx) {

server/app.js

@@ -10,7 +10,7 @@ import compose from 'koa-compose'// middleware composer
 import compress from 'koa-compress'// HTTP compression
 import session from 'koa-session'// session for flash messages
 import api from './api'
-import constants from './utils/constants'
+import consts from './utils/consts'
 import config from '../nuxt.config.js'
 import debugModule from 'debug'// small debugging utility
 
@@ -19,8 +19,8 @@ import proxy from 'koa-proxies'
 // Start nuxt.js
 async function start () {
   const isWin = /^win/.test(process.platform)
-  const host = constants.HOST
-  const port = constants.PORT
+  const host = consts.HOST
+  const port = consts.PORT
   const debug = debugModule('app')
   const app = new Koa()
 
@@ -65,8 +65,11 @@ async function start () {
     await next()
   })
 
+  const SESSION_CONFIG = {
+    key: consts.SESS_KEY
+  }
   // session for flash messages (uses signed session cookies, with no server storage)
-  app.use(session(app))// note [email protected] is v1 middleware which generates deprecation notice
+  app.use(session(SESSION_CONFIG, app))// note [email protected] is v1 middleware which generates deprecation notice
 
   const nuxt = new Nuxt(config)
   // Build only in dev mode
@@ -83,7 +86,7 @@ async function start () {
 
   app.use(async (ctx, next) => {
     await next()
-    if (ctx.state.subapp !== constants.API) {
+    if (ctx.state.subapp !== consts.API) {
       ctx.status = 200 // koa defaults to 404 when it sees that status is unset
       ctx.req.session = ctx.session
       await nuxt.render(ctx.req, ctx.res)
@@ -118,7 +121,7 @@ async function start () {
   // note no 'next' after composed subapp, this must be the last middleware
   app.use(async function composeSubapp (ctx, next) {
     switch (ctx.state.subapp) {
-      case constants.API: await compose(api.middleware)(ctx); break
+      case consts.API: await compose(api.middleware)(ctx); break
     }
   })