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的登陸驗證及返回登錄前頁面實現