vue的登陸驗證及返回登錄前頁面實現
阿新 • • 發佈:2018-03-05
ble AI ldr false 有一個 url 兩個 並不是 ||
一、路由配置部分如下所示,
導出路由示例 let router = new VueRouter({ |
routes: [ |
// 登陸 |
{ name: ‘login‘, path: ‘/login‘, component: Login }, |
// 後臺管理 |
{ name: ‘admin‘, path: ‘/admin‘, component: Admin, children: [...goods] }, |
] |
}); |
// 添加路由前置守衛, 其實就是添加一個函數, 這個函數會在路由配置之前執行, 我們可以在這裏添加一些登陸或者權限的校驗 |
// to與from是兩個對象, 可以拿到url信息 |
router.beforeEach((to, from, next) => { |
// 通過to.name得知用戶訪問的是什麽頁面, 如果是admin相關頁面, 那麽繼續判斷用戶有沒有登陸 |
// 有 => 調用next()通過訪問, 沒有 => 調用next({name: ‘login‘})跳轉到登陸頁面 |
// 現在我們是在一個js模塊當中, 並不是在vue組件中, 所以這裏的this不是組件實例, 而是undefined, 無法this.$http與this.$api |
Vue.prototype.$http.get(Vue.prototype.$api.islogin).then(res => { |
let isLogin = false; |
// 已登陸 |
if(res.data.code == ‘logined‘) { |
isLogin = true; |
} |
// 如果訪問登陸頁面 |
// 已登陸 => 為了用戶友好體驗, 自動跳轉到後臺管理 |
// 未登陸 => 允許訪問登陸頁面 |
if(to.name == ‘login‘) { |
if(isLogin) { |
next({name: ‘admin‘}); |
}else { |
next(); |
} |
} |
// 如果訪問後臺頁面 |
// 已登陸 => 允許訪問後臺頁面 |
// 未登陸 => 禁止訪問, 自動跳轉到登陸頁面 |
if(to.name != ‘login‘) { |
if(isLogin) { |
next(); |
}else { |
// query用來設置url中的查詢字符串, 我們這裏把用戶要訪問的頁面地址通過query記錄下來 |
// 將來用戶登陸成功後, 再自動跳回這個地址 |
next({name: ‘login‘, query: {next: to.fullPath}}); |
} |
} |
}) |
}); |
export default router; |
二,login 組件 配置部分
使用了路由插件之後,組件實例就有了該對象,對象有一個Push方法,可以進行路由跳轉 |
let nextPage = this.$route.query.next || ‘/admin‘; |
// 登陸成功後, 跳轉到用戶未登陸前要訪問的頁面 |
this.$router.push({ path: nextPage }); |
vue的登陸驗證及返回登錄前頁面實現