Vue 出一個女友吧!-Login API

前言

接下來這邊將會使用六角學院的 API 來串接囉~

API

申請練習用的 API 可以看 官方網站

API 文件在此

起手式

首先這邊將會製作 Login 的功能頁面，但是這邊要先來引入 AJAX 套件，也就是前面安裝的 Vue-axios，所以打開 main.js 輸入以下即可引入

import Vue from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';
 
Vue.use(VueAxios, axios);

環境變數

接下來這邊還要建立一個環境變數，所以建立 .env 檔案，內容如下

VUE_APP_HEXURL=https://vue-course-api.hexschool.io
VUE_APP_HEXNAME=你申請的 API 名稱

這邊有一個雷點，請務必用 VUE_APP_ 當開頭，否則會無法被 webpack 打包唷，官網這邊也有提到 原因

撰寫 Login AJAX

接下來開啟 Login 畫面，並在下方建立 script

<script>
export default {
  data() {
    return {
      
    }
  },
}
</script>

那我們這邊是使用 axios 套件來做 AJAX，撰寫之前我們要先定義 methods，然後讓欄位可以取得欄位資料以及觸發 AJAX 的 function，HTML 部分我就不列出來了，只列 JS 部分

signin() {
  const vm = this;
  const api = `${process.env.VUE_APP_HEXURL}/admin/signin`;
  vm.$http.post(api, vm.user)
    .then((response) => {
      console.log(response);
    })
    .catch((error) => {
      console.log(error);
    });
},

請記得務必先做好資料的規畫並綁定於欄位上

data() {
  return {
    user: {
      username: '',
      password: '',
    },
  };
},

基本上如果沒有問題的話，當你嘗試登入時就若帳號密碼正確就會得到 response，那就可以知道回傳的訊息做判斷跳轉頁面進入 Dashboard，這邊要注意的是跳轉會使用的方法是 vm.router.push('route 名稱')

vm.$http.post(api, vm.user)
  .then((response) => {
    if (response.data.success) {
      vm.$router.push('/admin')
    }
  })
  .catch((error) => {
    console.log(error);
  });

另外這邊其實還有一個問題，也就是使用者是可以不用透過登入帳號，直接在瀏覽器上輸入 http://localhost:8080/#/admin 進入後台，那麼這邊就要使用 Vue-Router 裡面其中一個 API　叫做 導航守衛

他是透過觀察 URL 的變化來觸發內容的，使用方法則是在 main.js 中添加，這樣子才能全域保護

router.beforeEach((to, from, next) => {
  ...
})

• to - 即將進入的地方
• form - 準備離開的地方
• next - 是否允許通過概念

我們會使用 to 底下的 meta.requiresAuth，判斷即將進入的 router 是否需要登入，但是我們後臺頁面並沒有加入 requiresAuth，所以要打開 router.js 替後臺加入

{
  path: '/admin',
  name: '',
  component: () => import('./views/admin/Dashboard.vue'),
  children: [
    {
      path: '',
      name: 'products',
      component: () => import('./components/admin/Products.vue'),
      meta: { requiresAuth: true },
    },
  ],
},

接下來回頭改 beforeEach

router.beforeEach((to, from, next) => { // 只要導航有變化就會觸發
  if (to.meta.requiresAuth) { // 判斷即將進入的頁面 meta 是否有 requiresAuth
    const url = `${process.env.VUE_APP_HEXURL}/api/user/check`;
    axios.post(url).then((response) => {
      if (response.data.success) {
        next(); // 若有登入就進入下一個頁面
      } else {
        next({ path: '/login' }); // 若登入失敗就導回登入頁面
      }
    });
  } else {
    next(); 
  }
});

登出

登出的方式就簡單許多，打開 Navbar.vue，在下面新增登出 methods function

signout() {
  const vm = this;
  const api = `${process.env.VUE_APP_HEXURL}/logout`;
  vm.$http.post(api, vm.user)
    .then((response) => {
      if (response.data.success) {
        vm.$router.push('/login')
      }
    })
    .catch((error) => {
      console.log(error);
    });
},

這樣就可以達到登出的需求了

beforeEach 雷點

如果由於 beforeEach 是需要透過 URL 的切換來觸發導航路由，所以如果你直接輸入網址 http:localhost/#/admin 你會發現還是可以進去到後台，除非你是在 http://localhost/#/login 修改路徑才會觸發導航路由

那麼這邊的解決方式很簡單，只要在必定會觸發的元件上加上驗證即可，例如後台的 Navbar 加上 checkLogin()

checkLogin() {
  const vm = this;
  const url = `${process.env.VUE_APP_HEXURL}/api/user/check`;
  vm.$http.post(url).then((response) => {
    if (response.data.success) {

    } else {
      vm.$router.push('/login');
    }
  });
}

並透過生命週期 created 一進入到該後台頁面就會觸發這個 AJAX 方法，這樣就可以達到跳轉哩~