美文网首页
拦截时,跳转login

拦截时,跳转login

作者: 肥羊猪 | 来源:发表于2022-06-01 11:01 被阅读0次

官方文档的main.js是这样写的:

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

而我们在拦截http时,有可能以为token无效跳转到登录:

NProgress.configure({ showSpinner: false }) // NProgress Configuration
router.beforeEach(async (to, from, next) => {
  // 全局前置守卫,当有路由进行跳转时就会进入这个守卫
  NProgress.start() // 开始加载进度条
  document.title = getPageTitle(to.meta.title)// 设置页面标题
  const hasToken = getToken() // 判断用户是否登录,也就是是否能获得token值,
  if (hasToken) {
      ...
     next()
  } else {
     window.location.replace(process.env.VUE_APP_API); // 这种方式是跳转到外部链接登录
// 或者跳转到内部链接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 } })

相关文章

网友评论

      本文标题:拦截时,跳转login

      本文链接:https://www.haomeiwen.com/subject/zohxmrtx.html