出現場景：最近在處理一個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後回到之前的頁面