出現場景：最近在處理一個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>