---
title: '10/26 VueJS 教學筆記: Login 登入機制實作'
disqus: hackmd
---

10/26 VueJS 教學筆記: Login 登入機制實作
===

綱要

[TOC]

Login 登入機制實作
---

一般來說，登入後變更路由的驗證會看 Session Storange 或 Cookies 中的 token 是否有效，由此判斷該進入哪個路由。


先在`router.js`底下新增 login 的頁面與指定 component 名稱、路徑。

import Vue from 'vue'
import Router from 'vue-router'
import Cookies from 'js-cookie'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Login'm
      component: () => import('./views/Login.vue')
    },
    // 其他路由
    {
      path: '/home',
      name: 'home',
      component: Home,
      meta: { requireAuth: true }, // 用來作為此頁是否需要權限驗證的設定
      children: [...]
    },
    // ...
  ]
})

export default router

打好基本的外觀並定義表單v-model：
[Github範例](https://github.com/fortes1219/vue_0803/blob/0803/src/views/Login.vue)

<template>
  <div class="row vertical inset" data-width="20rem">
    <el-input v-model="loginForm.username" type="text" placeholder="Username" data-space-bottom="0.5rem" />
    <el-input v-model="loginForm.password" type="password" placeholder="Password" data-space-bottom="0.5rem" />
    <el-button type="primary" @click="handleLogin" >Login</el-button>
    <br>
    <el-button @click="removeCookie">Clear</el-button>
  </div>
</template>

// 引入js-cookie
import Cookies from 'js-cookie'
export default {
  data() {
    return{
      loginForm: {
        username: '',
        password: '',
        token: ''
      }
    }
  },
  // methods
}

增加表單 submit 後的登入判斷方法

methods: {
  handleLogin() {
    const token = 'asds32adsavrAS3Fadf5567' // token本身就是加密過的字串，隨意
    let username = this.loginForm.username
    let password = this.loginForm.password
    // 帳號密碼需驗證不能為空
    if (username !== '' && password !== '') {
      this.loginForm.token = token
    } else {
      alert('帳號密碼不能為空')
    }
    
    Cookies.set('login', JSON.stringify(this.loginForm), { expires: 1 })
    console.log(this.loginForm)
    
    // cookie當中有token被設置才能改變路由
    if (Cookies.get('login') && this.loginForm.token) {
      this.$router.push({name: 'Dashboard'})
    }
  },
  
  // 將Cookies清除的測試用button事件
  removeCookie() {
    Cookies.remove('login')
  }
}

光是在 login 頁面還不能完全做到攔截不正確登入訊息，我們必須在`router.js`做更進一步處理，Vue官方文件中對於 Router 的敘述可以參照[這裡](https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E7%BB%84%E4%BB%B6%E5%86%85%E7%9A%84%E5%AE%88%E5%8D%AB)。
[Github範例](https://github.com/fortes1219/vue_0803/blob/0803/src/router.js)

import Vue from 'vue'
import Router from 'vue-router'
import Cookies from 'js-cookie'

Vue.use(Router)

const router = new Router({ routes: [...] })

router.beforeEach(async(to, from, next) => {
  // 看看 to 和 from 兩個 arguments 會吐回什麼訊息
  console.log('to: ', to)
  console.log('from: ', from)
  
})

export default router

由上面的`console.log()`可以看到以下結果：


to 回傳的物件是目的路由資訊，from 則是從哪個路由出發。

接下來看看如果沒有帶 token 時，怎麼攔截跳轉路由的 request：

import Vue from 'vue'
import Router from 'vue-router'
import Cookies from 'js-cookie'

Vue.use(Router)

const router = new Router({ routes: [...] })

router.beforeEach(async(to, from, next) => {
  // 看看 to 和 from 兩個 arguments 會吐回什麼訊息
  console.log('to: ', to)
  console.log('from: ', from)
  
  // 目的路由在meta上是否有設置requireAuth: true
  if (to.meta.requireAuth) {
    // 獲取Cookies當中的login資訊並取得token
    const info = Cookies.get('login')
    console.log(token)
    if (info) {
      const token = JSON.parse(info).token
      // 如果token不為空，且確實有這個欄位則讓路由變更
      if (token.length > 0 || token === undefined) {
        next()
      } else {
        // 未通過則導回login頁面
        next({ name: 'Login' })
      }
    } else {
      next({ name: 'Login' })
    }
  } else {
    next()
  }
})

export default router

EXTRA
---
如果你希望跳轉路由時，能有類似 Youtube 那樣的小橫條出現在畫面上端跑過場，可以考慮使用這個外掛：[NProgress](https://github.com/rstacruz/nprogress)

安裝：`npm install nprogress`

然後在`router.js`的`beforeEach()`和`afterEach()` 上各自設定 `NProgress.start()` 以及 `NProgress.end()`

import Vue from 'vue'
import Router from 'vue-router'
import Cookies from 'js-cookie'
import NProgress from 'nprogress'

router.beforeEach(async(to, from, next) => {
  // ...
  NProgress.start()
}

router.afterEach((to: Route) => {
  // ...
  NProgress.done()
}

###### tags: `VueJS` `Cookies` `Login`