登錄後重定向到原先路由(帶參數)

入口文件:

在監聽路由改變前,對token進行判斷,當需要跳轉到登錄頁時,需要帶上上一個頁面的路由信息

router.beforeEach(async (to, from, next) => {

  NProgress.start();
  document.title = getPageTitle(to.meta.title);
  const hasToken = getToken();
  let userInfo = getUserInfo();
  if (hasToken) {
    if (to.path === '/login') {
      // if is logged in, redirect to the home page
      next({ path: '/' });
      NProgress.done();
    } else {
      const hasUserInfo = store.getters.userInfo;
      if (hasUserInfo && hasUserInfo.length > 0) {
        next();
      } else {
        try {
          userInfo = JSON.parse(userInfo);
          const accessRoutes = await store.dispatch(
            'permission/generateRoutes',
            userInfo.accountType
          );
          store.state.user.userInfo = JSON.stringify(userInfo);
          router.options.routes = accessRoutes;
          router.addRoutes(accessRoutes);
          next({ ...to });
        } catch (error) {
          await store.dispatch('user/resetToken');
          Message.error('Has Error', error);
          next(`/login?redirect=${to.path}&query=${JSON.stringify(to.query)}`);
          NProgress.done();
        }
      }
    }
  } else {
    /* has no token*/
    if (whiteList.indexOf(to.path) !== -1) {
      // in the free login whitelist, go directly
      next();
    } else {
      next(`/login?redirect=${to.path}&query=${JSON.stringify(to.query)}`);
      NProgress.done();
    }
  }
});

在每次路由改變後,都在store中記錄下當前的路由和參數

router.afterEach((to, from) => {
  if (to.path != '/login') {
    store.dispatch('user/setRouteInfo', {
      redirect: to.path,
      query: to.query
    });
  }

  NProgress.done();
});

request.js:

當需要在token驗證失敗時執行返回到首頁操作時:

store.dispatch('user/backLoginPage');

store/modules/user.js:

const mutation = {
    SET_ROUTEINFO: (state, routeInfo) => {
    state.routeInfo = routeInfo;
  }
}

const actions = {
  backLoginPage({ commit, dispatch, state }) {
    commit('SET_TOKEN', '');
    clearUserData();
    resetRouter();
    dispatch('tagsView/delAllViews', {}, { root: true });
    let redirect = state.routeInfo ? state.routeInfo.redirect : '';
    let query = state.routeInfo ? state.routeInfo.query : {};
    let params = '';
    params += `?redirect=${redirect}&query=${JSON.stringify(query)}`;
    router.push(`/login${params}`);
  },
    setRouteInfo({ commit }, routeInfo) {
      commit('SET_ROUTEINFO', routeInfo);
  }
}

login.vue:

登錄成功後,根據記錄的數據,跳轉到指定帶參數的路由

 watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect;
        this.query = route.query && route.query.query;
        if (this.query) {
          try {
            this.query = JSON.parse(this.query);
          } catch (e) {
            this.query = {};
          }
        }
      },
      immediate: true
    }
  }

methods: {
  async handleLogin() {
    ...
    this.$router.push({
      path: this.redirect || '/',
      query: this.query || {}
    });
  }
}

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章