Vue 出一個女友吧!-Login API
前言
接下來這邊將會使用六角學院的 API 來串接囉~
API
申請練習用的 API 可以看 官方網站
起手式
首先這邊將會製作 Login 的功能頁面,但是這邊要先來引入 AJAX 套件,也就是前面安裝的 Vue-axios,所以打開 main.js 輸入以下即可引入
1 | import Vue from 'vue'; |
環境變數
接下來這邊還要建立一個環境變數,所以建立 .env 檔案,內容如下
1 | VUE_APP_HEXURL=https://vue-course-api.hexschool.io |
這邊有一個雷點,請務必用 VUE_APP_
當開頭,否則會無法被 webpack 打包唷,官網這邊也有提到 原因
撰寫 Login AJAX
接下來開啟 Login 畫面,並在下方建立 script
1 | <script> |
那我們這邊是使用 axios 套件來做 AJAX,撰寫之前我們要先定義 methods,然後讓欄位可以取得欄位資料以及觸發 AJAX 的 function,HTML 部分我就不列出來了,只列 JS 部分
1 | signin() { |
請記得務必先做好資料的規畫並綁定於欄位上
1 | data() { |
基本上如果沒有問題的話,當你嘗試登入時就若帳號密碼正確就會得到 response,那就可以知道回傳的訊息做判斷跳轉頁面進入 Dashboard,這邊要注意的是跳轉會使用的方法是 vm.router.push('route 名稱')
1 | vm.$http.post(api, vm.user) |
另外這邊其實還有一個問題,也就是使用者是可以不用透過登入帳號,直接在瀏覽器上輸入 http://localhost:8080/#/admin
進入後台,那麼這邊就要使用 Vue-Router 裡面其中一個 API 叫做 導航守衛
他是透過觀察 URL 的變化來觸發內容的,使用方法則是在 main.js 中添加,這樣子才能全域保護
1 | router.beforeEach((to, from, next) => { |
- to - 即將進入的地方
- form - 準備離開的地方
- next - 是否允許通過概念
我們會使用 to
底下的 meta.requiresAuth
,判斷即將進入的 router 是否需要登入,但是我們後臺頁面並沒有加入 requiresAuth
,所以要打開 router.js 替後臺加入
1 | { |
接下來回頭改 beforeEach
1 | router.beforeEach((to, from, next) => { // 只要導航有變化就會觸發 |
登出
登出的方式就簡單許多,打開 Navbar.vue,在下面新增登出 methods function
1 | signout() { |
這樣就可以達到登出的需求了
beforeEach 雷點
如果由於 beforeEach 是需要透過 URL 的切換來觸發導航路由,所以如果你直接輸入網址 http:localhost/#/admin
你會發現還是可以進去到後台,除非你是在 http://localhost/#/login
修改路徑才會觸發導航路由
那麼這邊的解決方式很簡單,只要在必定會觸發的元件上加上驗證即可,例如後台的 Navbar 加上 checkLogin()
1 | checkLogin() { |
並透過生命週期 created 一進入到該後台頁面就會觸發這個 AJAX 方法,這樣就可以達到跳轉哩~