Vue 出一個女友吧!-Login API

前言

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

API

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

API 文件在此

起手式

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

1
2
3
4
5
import Vue from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';

Vue.use(VueAxios, axios);

環境變數

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

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

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

撰寫 Login AJAX

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

1
2
3
4
5
6
7
8
9
<script>
export default {
data() {
return {

}
},
}
</script>

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

1
2
3
4
5
6
7
8
9
10
11
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);
});
},

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

1
2
3
4
5
6
7
8
data() {
return {
user: {
username: '',
password: '',
},
};
},

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

1
2
3
4
5
6
7
8
9
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 中添加,這樣子才能全域保護

1
2
3
router.beforeEach((to, from, next) => {
...
})
  • to - 即將進入的地方
  • form - 準備離開的地方
  • next - 是否允許通過概念

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

1
2
3
4
5
6
7
8
9
10
11
12
13
{
path: '/admin',
name: '',
component: () => import('./views/admin/Dashboard.vue'),
children: [
{
path: '',
name: 'products',
component: () => import('./components/admin/Products.vue'),
meta: { requiresAuth: true },
},
],
},

接下來回頭改 beforeEach

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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

1
2
3
4
5
6
7
8
9
10
11
12
13
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()

1
2
3
4
5
6
7
8
9
10
11
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 方法,這樣就可以達到跳轉哩~

0%