欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue router+vuex實(shí)現(xiàn)首頁登錄驗(yàn)證判斷邏輯

 更新時(shí)間：2018年05月17日 14:50:29   作者：tinaawang  
這篇文章主要介紹了vue router+vuex實(shí)現(xiàn)首頁登錄判斷邏輯，用于判斷是否登錄首頁，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

首頁登錄邏輯要求在頁面上判斷是否獲取到登錄token ，沒有獲取到則跳轉(zhuǎn)到登錄頁。登錄成功后，跳轉(zhuǎn)到前一個(gè)頁面。

1.vue router

路由判斷首先我們想到的是router.beforeEach 前置導(dǎo)航守衛(wèi) ，這個(gè)方法接受三個(gè)參數(shù) to from next 。

to參數(shù)為即將跳轉(zhuǎn)的路由路徑，from為當(dāng)前導(dǎo)航正要離開的路由，next方法用來resolve這個(gè)鉤子。

下面以工作中寫的一個(gè)判斷為為例子：

router.beforeEach(async (to, from, next) => {
 const { name, meta } = to;
 const { requireLogin } = meta;
 if (name === 'login') { // 如果是登錄頁則用next方法resolve掉這個(gè)鉤子，如果不是，進(jìn)行到下一個(gè)判斷
  return next();  
 }
 const needLogin = requireLogin && !store.getters.user.isLogin; // 從store中讀取是否獲取了已登錄的信息
 if (needLogin) {
  return next({  // 如果沒有則跳轉(zhuǎn)到登錄頁，將當(dāng)前路由路徑放到參數(shù)中
   name: 'login',
   params: { back: to },
  });
 }
 return next(); 
});

2. this.$router 與 this.$route   this.$router.push 與 this.$router.replace

在登錄頁完成登錄請(qǐng)求后進(jìn)行下面的操作

獲取路徑中存放前一個(gè)路徑的參數(shù) ,然后跳轉(zhuǎn)到該頁面

 loginSuccess() {
   const { params: { back } } = this.$route;
   const route = back || { name: 'home' };
   const { name, params, query } = route;
   this.$router.replace({ name, params, query });
  },

在上面這段代碼中出現(xiàn)了兩個(gè)我們經(jīng)?；煜母拍?

我們知道this.$router是router實(shí)例，可以用來直接訪問路由。我們稱router配置中每一個(gè)對(duì)象為一個(gè)路由記錄，this.$route是暴露出來用來訪問每個(gè)路由記錄的。因此我們獲取參數(shù)時(shí)使用的是this.$route 跳轉(zhuǎn)路由時(shí)使用的是道this.$router。

上端代碼中我們使用了replace而不是push來跳轉(zhuǎn)路由，這兩者的區(qū)別是會(huì)不會(huì)在history中產(chǎn)生記錄。replace不會(huì)新增記錄，而是直接替換掉了這條路由記錄。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論