在結束第三部分前
我以一個萬年老梗，卻很重要的需求：前後台頁面存取權限
來統整我們第三部分的
作法有非常多種，提供給正在學習Vue的人自行練習與思考

一、需求說明與功能展示

小通的主管為了讓小通理解如何實作Quasar初始化的流程
決定讓小通嘗試完成一個網站，包含一般前台跟通靈後台
需求包括「前後台存取權限」與「後端API串接」

(一) 前後台存取權限

1. 一般前台任何人都能進入，點選右上方的登入，可以進入登入頁面
2. 使用者可於登入頁面輸入帳號、密碼，若帳號密碼成功，導到通靈後台，失敗則留在原本的登入頁面
3. 若使用者並未處於登入的情況下，嘗試進入通靈後台，強制導回前台首頁

4. 若使用者已經登入且未登出的情況下，關掉瀏覽器或離開網頁後，可以直接進入通靈後台

(二) API串接需求

小通的主管，請小通使用「miragejs」自行模擬RESTFul API Server
方便前端工程師在後端開發完成前，撰寫並測試前端串接的功能

miragejs 可以新增假的Model資料來測試帳號登入成功或失敗
實際的Token驗證邏輯前端不需要模擬，只需簡單判斷Request是否Token即可

1. 測試區的API網址：http://development.com.tw/api
   正式區的API網址：http://production.com.tw/api

2. 登入
   (1) 網址：API網址/login
   (2) 方法: POST
   (3) Request格式：

{
    username: 'username',
    password: 'password'
}

(4) 登入成功的Response，Status Code為200，Response格式：

{ 
    error: null, 
    values: { 
      token: 'token_string' 
    } 
}

(5) 登入失敗的Response，Status Code為400，Response格式：

{ 
    error: 'Invalid Username or Password',
    values: null
}

2. 登出
   (1) 網址：API網址/logout
   (2) 方法: POST
   (3) Request格式：

{
    token: 'token_string'
}

(4) 登出成功的Response，Status Code為200，Response格式：

{ 
    error: null, 
    values: null
}

(5) 登出失敗的Response格式，Status Code為401，Response格式：

{ 
    error: 'Invalid Token',
    values: null
}

3. 後端檢查當前Token是否登入且有效
   (1) 網址：API網址/check_token
   (2) 方法: POST
   (3) Request格式：

{
    token: 'token_string'
}

(4) 使用者為登入狀態且Token有效的Response，Status為200，Response格式：

{ 
    error: null, 
    values: null
}

(5) 使用者並未登入狀態，或者Token無效的Response，Status為401，Response格式：

{ 
    error: 'Invalid Token',
    values: null
}

二、重要的初始化流程

1. Token的存取 (Cookie 或 localStorage 與 Vuex的操作)
2. axios 的Base URL 和 每次request帶入token的方式 (axios.interceptors.request.use)
3. miragejs 的啟動
4. 每一次進入任一前端頁面時，檢查該頁面是否需要登入 (vue router 的 router.beforeEach)