攔截時,跳轉(zhuǎn)login

官方文檔的main.js是這樣寫的:

import Vue from 'vue'
...
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

而我們在攔截http時,有可能以為token無效跳轉(zhuǎn)到登錄:

NProgress.configure({ showSpinner: false }) // NProgress Configuration
router.beforeEach(async (to, from, next) => {
  // 全局前置守衛(wèi),當(dāng)有路由進行跳轉(zhuǎn)時就會進入這個守衛(wèi)
  NProgress.start() // 開始加載進度條
  document.title = getPageTitle(to.meta.title)// 設(shè)置頁面標(biāo)題
  const hasToken = getToken() // 判斷用戶是否登錄,也就是是否能獲得token值,
  if (hasToken) {
      ...
     next()
  } else {
     window.location.replace(process.env.VUE_APP_API); // 這種方式是跳轉(zhuǎn)到外部鏈接登錄
// 或者跳轉(zhuǎn)到內(nèi)部鏈接login路由
  }
})
router.afterEach(() => {
  // 全局后置鉤子
  NProgress.done()
})

但是我們在這里無法拿到this,所以這么才能走this.$router.push({ name: "xxx", params: { xx } });呢。
很簡單,就在main.js里面拿出Vue就行:

let vue = new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})
export default vue

然后再攔截里面引入main就可以拿到vue了:

import vue from './main.js'
...
vue.$router.push({ name: "xxx", params: { xx } })
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容