vue需要登录、不需要登录访问的页面，都在登录后回到之前的页面

出现场景：最近在处理一个vue相关的阅读项目。有些页面（如首页）不需要登录可以查看，有些页面（书籍阅读页面）需要登录才能查看，但是，都想在登录之后返回到之前的页面。

因为我这边需要登录的页面较多，不需要登录的页面较少，所以在router.js中的meta如下处理（即通过noNeedLogin控制）：

//首页
{
  path: 'home',
  name: 'home',
  component: _import('Home'),
  meta: { noNeedLogin: true },
},

相关的路由守卫这样处理：

router.beforeEach((to, from, next) => {
  if (!to.meta.noNeedLogin) { // 需要登录的页面处理
    if (window.localStorage.getItem('isLogin')) {
      next();
    } else {
      next({ path: '/form/userLogin', query: { redirect: to.fullPath } });
    }
  } else { // 不需要登录的页面处理
    next();
  }
});

但是上边的代码对不需要登录就可访问的页面没有用，就想着在else里面通过判断to.path==='/form/userLogin'来解决这个问题。最后导致页面死循环了，最后在登录页面使用了守卫解决。方案如下：

<script>
  let redirectUrl; // 定义一个路由变量
  export default {
    ...
  }
</script>

然后在beforeRouteEnter中进行处理:

<script>
  let redirectUrl;
  export default {
      beforeRouteEnter(to, from, next) {
        redirectUrl = from.fullPath;
        next(); // 这个不写的话无法显示登录页面
     }
  }
</script>

在登录请求完成之后跳转到上个页面：

<script>
  let redirectUrl;
  export default {
    beforeRouteEnter(to, from, next) {
      if (to.query && to.query.redirect) {
        redirectUrl = to.query.redirect
      } else {
        redirectUrl = from.fullPath
      }
      next(); // 这个不写的话无法显示login页面
    },
    methods:{
      login() {
        ...
        this.$router.push(redirectUrl);
      }
    }
  }
</script>

但是此时有些页面在登录后是不需要跳回的，而是应该跳到首页的，比如从注册页面到登录页，登录之后不是回到注册页，而是跳转到首页，所以需要添加处理，用一个白名单：

<script>
  let redirectUrl;
  // 不重定向白名单，比如从注册跳转到登录，登录之后应该到首页而不是回到注册页
  const whiteList = ['/form/userLogin', '/form/userRegister', '/form/resetPassword']
  export default {
    beforeRouteEnter(to, from, next) {
      if (to.query && to.query.redirect) {
        redirectUrl = to.query.redirect
      } else {
        redirectUrl = from.fullPath
      }
      next(); // 这个不写的话无法显示login页面
    },
    methods:{
      login() {
        ...
        let url = whiteList.indexOf(redirectUrl) === -1 ? redirectUrl : '/';
        this.$router.push(url);
      }
    }
  }
</script>

此篇文章引用：vue 需要登录、不需要登录访问的页面都在login后回到之前的页面