Vue.js 電商練習技術整理 -- 登入簡易路徑切換

文章目的

一般電商都會有登入畫面，當登入成功時會有畫面路徑的切換，本文用來記錄 Vue Cli 製作此方法流程。

基本概念

在登入頁面中透過接取後端驗證 API 來認證使用者的帳號密碼，若驗證成功就變更路徑至其他頁面。
其他頁面具有登出功能，透過後端登出 API 將使用者帳號登出，並使路徑跳轉至登入前畫面。
需登入才能進入的頁面，在尚未登入時不能隨意進入。

驗證帳號 API 接取與路徑切換

我們可以在 components 資料夾底下新增一個 pages 資料夾，並在裡面新增一個 Login.vue 檔。
在 Login.vue 檔中切出需要的登入版型，並透過 v-model 方式將使用者輸入的帳號密碼做雙向綁定，程式碼如下：
1
2
3
4
5
6
7
8
data () {
return {
user: {
username: '',
password: ''
}
}
},
*這邊 data 裡的格式，根據驗證 api 要求的格式來設定。**

我們為登入的版型製作一個 submit 的事件來觸發驗證 API，事件方法如下：

methods: {
   signin: function () {
     const api = `驗證的 api 網址`
     const vm = this
     this.$http.post(api, vm.user).then((response) => {
       if (response.data.success === true) {
         vm.$router.push('/')
       }
     })
   }
 }

我們利用 post 回傳使用者資料(user)給後端，利用判斷式判斷後端回傳成功與否來決定路徑是否切換。

登出驗證與路徑切換

現在我們要做一個簡易的登出按鈕，讓我們點擊時可以回到登入前的畫面。
我們這邊示範就在登入後顯示的頁面上製作此按鈕。

製作一顆按鈕，讓其點擊後觸發一個事件，事件為接取登出 API ，程式碼如下：

methods: {
   signout () {
     const api = `驗證登出 api 網址`
     const vm = this
     this.$http.post(api).then((response) => {
       console.log(response.data)
     })
   }
 }

接著我們在事件裡新增一個判斷式，若驗證成功即回到登入前頁面，程式碼如下：

methods: {
    signout () {
      const api = `驗證登出 api 網址`
      const vm = this
      this.$http.post(api).then((response) => {
        console.log(response.data)
        if (response.data.success === true) {
          vm.$router.push('/login')
        }
      })
    }
  }

導入導航守衛

做到這裡登入前與登入後畫面已可正確切換，但這時會有個問題，即使使用者尚未登入，也可利用變更網址的方式，訪問登入後的頁面。
我們這裡要介紹利用導航守衛讓使用者無法不經過認證就訪問特定頁面。
導航守衛的定義在於它會判斷我們要前往的頁面以及正要離開的頁面，如果要前往的頁面是需要認證的，它會等認證完後才開放通行 – 導航守衛

現在就來試著把剛剛完成的登入效果導入導航守衛吧。

決定我們需要認證才能進入的頁面，決定好後到 Vue.router 的配置檔(index.js)，在 routes 中找到該頁面加入meta: { requiresAuth: true }，讓系統知道此頁面是需要認證才能訪問(可參考路由元訊息)。示範如下：
1
2
3
4
5
6
{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
meta: { requiresAuth: true }
},

來到我們的進入點(main.js)在裡面做全局的導航守衛部屬(可參考全局守衛部屬)，程式碼如下：

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    const api = `檢視是否為登入狀態 api`
    axios.post(api).then((response) => {
      if (response.data.success === true) {
        next()
      } else {
        next({
            path: '/login'
        })
        // next(false)
      }
    })
  } else {
    next()
  }
})

這裡針對上方程式碼做解釋：

參數解釋：
- to 代表我們將要前往的頁面
- from 代表我們將要離開的頁面
- next 決定是否前往的方法
我們透過判斷式if (to.meta.requiresAuth)，判斷出當我們要前往的頁面是需要驗證時就接取 api，不需要則直接切換即可。
這邊會發現接取 api 的程式碼有點不同，之前都是this.$http.post(api)，這裡變成axios.post(api)，原因是因為這時的環境是在 router 上，並不是像我們以往接取 api 時是在 Vue 的元件上，所以改成 axios 才能正常接取。
第二個判斷式，用來判斷若後端 api 驗證為登入狀態就讓頁面切換，否則停留在登入前畫面，那停留畫面部分有兩種寫法，一種是透過路徑的方式讓其重新導向登入前路徑，另一種是加入 false 中斷當前導覽並回到 from 的頁面。

避免使用者隨意改變網址導致跳轉到空白頁面

若使用者在網址後面加入一些亂碼，會使頁面跳轉到空白的頁面去，為了避免這情況發生我們可以去配置檔(index.js)的 routes 加入以下程式碼：

{
    path: '*', //當路徑為其它不存在的路徑時
    redirect: '/login' //重新導向此路徑(可自己定義)
},

補充

這邊要提醒一點，有些後端 API 可能會需要我們在接取 API 的同時，將後端的 Cookie 做儲存，並在最後接取 API 的同時，將 Cookie 傳至後端，才能完成 Ajax。
那如果要儲存 Cookie 我們可以在我們的進入點(main.js)，加入 axios 提供的程式碼 axios.defaults.withCredentials = true。

參考資料

六角學院課程–Vue 出一個電商網站