Try   HackMD

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

綱要

Login 登入機制實作

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

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

先在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範例

<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 的敘述可以參照這裡
Github範例

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

安裝:npm install nprogress

然後在router.jsbeforeEach()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