vue登录成功回跳某个页面

红太狼 2022-11-01 10:58 18阅读 0赞

## axios拦截器 ##

很多时候，项目有些页面需要用户进行登录才可以继续进行操作，，登录完之后就需要跳转到用户登录之前想去的那个页面，这个实现比较简单：  
使用axios进行http请求，进行拦截：

axios.interceptors.response.use(
    　　res => {
    　　//对响应数据做些事
    　　if (res.data.code === -1) { // 这里根据自己接口返回状态进行判断是否需要登录
    　　　　router.push({
    　　　　　　path: '/login',
    　　　　　　query:{
    　　　　　　　　redirect: location.hostname // 防止从外部进来登录
    　　　　　　}
    　　　　})
    　　}
    　　return res.data;
    　　},
    　　error => {
    　　　　let errorInfo = error.data.error ? error.data.error.message : error.data;
    　　　　return Promise.reject(errorInfo);
    　　}
    );
    // 在登录成功后书写逻辑：
    
    let hostName = this.$route.query.redirect; // 获取域名
    if (hostName === this.$url()) { // 判断如果域名是你项目域名，说明是从本网站内部跳转过来的，
    　　this.$router.go(-1); // 登录成功后，返回上次进入的页面；
    } else {
    　　window.open(this.$url()+'/article/news','_self'); // 若不是网站内部跳转过来的，登陆成功后进入网站首页
    }

## router生命周期（beforeEach） ##

// router文件夹下的 index.js
    import Vue from "vue";
    import Router from "vue-router";
    import routes from "./routes";  // 配置的路径
    
    Vue.use(Router);
    
    const router = new Router({
      routes,
      scrollBehavior
      // mode: 'history'
    });
    
    const router = new Router({
      routes,
      scrollBehavior
      // mode: 'history'
    });
    
    router.beforeEach((to, from, next) => {
      if (to.matched.some(route => route.meta && route.meta.requiresAuth)) {
        if (!this.$storage.getStorage("userInfo")) {  // 没有登录信息跳转到登录页
          next({
            path: "/login",
            query: { redirect: to.fullPath }  // 'to.fullPath'跳转到登录之前页面的路径
          });
        } else {
          next();
        }
      } else {
        next();
      }
    });
    export default router;

登录界面

<template>
      <div class="login-container">
        <van-form @submit="onSubmit">
          <van-field v-model="username" label="用户名" placeholder="用户名" required />
          <van-field v-model="password" type="password" label="密码" placeholder="密码" required />
          <div style="margin: 40px 0 0 0;">
            <van-button round block type="info" size="small" native-type="submit">提交</van-button>
          </div>
        </van-form>
      </div>
    </template>
    
    <script>
    import { webLogin } from '@/apis/apis'
    export default {
      data() {
        return {
          username: '',
          password: '',
        }
      },
      created() { },
      methods: {
        onSubmit() {
          if (!this.username) {
            this.$notify({ type: "danger", message: "请填写用户名" });
            return;
          } else if (!this.password) {
            this.$notify({ type: "danger", message: "请填写密码" });
            return;
          }
          let params = {
            username: this.username,
            password: this.password
          }
          webLogin(params).then(res => {
            if (res.code == 0) {
              this.$notify({ type: 'success', message: '恭喜，登录成功！' });
              // this.$router.push('/user'); 
              this.$storage.setStorage('userInfo', res.data);
              setTimeout(() => {
                let path = '/user';   // '/user' 为个人中心页面
                if (this.$route.query.redirect) {
                  path = this.$route.query.redirect   // 跳到之前的页面
                }
                this.$router.push({
                  path: path
                });
              }, 1000)
            } else {
              this.$notify(res.message)
            }
          })
        }
      }
    }
    </script>

综上所述：

不管***axios***拦截器，还是route的***beforeEach***周期都要保留上个页面的路由记忆***redirect***

if (!isLogin()) {
       this.$router.push({
        path: '/login',
        query: {redirect: 'your path'} // 如果你使用钩子函数，your path 可以替换成to.fullPath
      })
    }

登录成功后，获取query中的redirect属性，然后跳转到这个地址

this.$router.push(this.$route.query.redirect || '/')