vue & vuex 25 - Login | vue login page
昨天我們做了一個登入頁面,可是使用者還是可以任意轉跳到其他頁面,今天我們要讓其它頁面加上驗證項目,讓登入頁面變成我們的大門。今天目標:設定router驗證。如果token不存在,請轉跳到/login讓使用者重新登入。metameta路由表訊息[1]meta可以說是路由表中可以自訂設計的開發區域,可以把這邊當作自訂的config看待。自由設計記錄一些參數如requiresAuth是我們這次記錄是否需要驗證自訂的參數。matched如何讀取到meta?使用matched用來顯示此路由表物件所有訊息。因此matched.meta.requiresAuth就是我們紀錄的是否需要驗證參數。rout...
昨天我們做了一個登入頁面,可是使用者還是可以任意轉跳到其他頁面,今天我們要讓其它頁面加上驗證項目,讓登入頁面變成我們的大門。
今天目標: 設定 router 驗證。 如果 token 不存在,請轉跳到 /login 讓使用者重新登入。 metameta 路由表訊息[1]meta 可以說是路由表中可以自訂設計的開發區域,可以把這邊當作自訂的 config 看待。
自由設計記錄一些參數
如 requiresAuth 是我們這次記錄 是否需要驗證 自訂的參數。
matched如何讀取到 meta ?
使用 matched 用來顯示此路由表物件所有訊息。
因此 matched.meta.requiresAuth 就是我們紀錄的 是否需要驗證 參數。
router.beforeEach Hook在哪邊讀取 meta ?
router.beforeEach Hook 為 vue-router 轉跳之前必會觸發的 function
因此我們可以把頁面轉跳的驗證設計在這邊。
router.beforeEach((to, from, next) => { // some code.. }
帶有 3 個參數:
參數 功能 to 要轉跳的頁面 from 從哪個頁面轉過來 next 執行下一個事件,每個判斷都必須確保使用到 next()next(false); 將會中斷事件,轉跳到回 from 原始路由頁面next 的設計有點像 node.js express middleware
因此我們就可以在這邊解析 to.matched.requiresAuth 判斷要轉跳的頁面 是否需要驗證
main.js const router = new VueRouter({ // 使用 HTML 5 模式(沒有 hash, ex: #/hello) mode: history, base: __dirname, // routre 表 ...