登录后重定向到原先路由(带参数)

入口文件:

在监听路由改变前,对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 || {}
    });
  }
}

 

 

你可能感兴趣的:(Vuex,Vue)