Vue 登錄攔截-頁面攔截等等

記錄一下vue的頁面登錄攔截功能

1.通過設置router 的beforeEach功能實現。

一些點：

1. 可以放在main.js中設置，這樣可以將最外層的Vue 變成變量，然後通過其獲取 vuex的 store數據。

2. router中可以設置 某個頁面是否需要登錄的meta標識

3. 可以使用jquery控制modal窗口。

代碼參考：

router.beforeEach((to, from, next) => {
    let isLogin = vueApp.$store.state.User.user != null;
    //console.log("@登錄攔截：", to.path, "==登錄狀態:", isLogin);
    //console.log("頁面地址：", to.path, "===", from.path);
    //console.log("@參數：", JSON.stringify(to.params));
    if (!isLogin && to.matched.some(res => res.meta.loginAuth)) {
        next(false) // 取消跳轉
        //彈出登錄框  可以使用jquery
        $('#loginDialog').modal('show');
    } else {
        //通過該方式可以保存 VueRouter 的數據不被刷新
        localStorage.setItem('routerParams', JSON.stringify(to.params));
        next()
    }
});