一共3個頁面，默認指向login頁面，登陸后存儲client_id到cookie和global.CLIENT_ID

我想做的是登錄狀態(tài)檢測，頁面跳轉(zhuǎn)時檢查global.CLIENT_ID或者cookie，不存在就跳轉(zhuǎn)到login頁面去。

// 路由頁面
import main from './components/main/main.vue';
import star from './components/star/star.vue';
import login from './components/login/login.vue';


// 路由配置
const routes = [
    {
        name: 'main',
        path: '/main',
        component: main,
        // meta: {
        //     login_required: true
        // }
    },
    {
        name: 'star',
        path: '/star',
        component: star,
        // meta: {
        //     login_required: true
        // }
    },

    {
        name: 'login',
        path: '/login',
        component: login,
        // meta: {
        //     login_required: false
        // }
    },
    {
        path: '/',
        redirect: '/login'
    }
];

const router = new VueRouter({
    routes: routes
});

new Vue({
    el: '#app',
    components: {App},
    template: '<App/>',
    router: router
})

我百度了一下相關(guān)的問題，有人說可以用router鉤子，可我試了一下

router.beforeEach(function (to, from, next) {
    if(to.name === 'main' || to.name === 'star'){
        next('/login');
    }

    else{
        next();
    }

});

即使是這樣，也會存在兩個問題：
1、如果直接在瀏覽器地址欄輸入http://localhost:8080/#/main，可以直接略過邏輯訪問到main
2、當(dāng)前頁面是main，點擊一次star會跳轉(zhuǎn)到login，但再次點擊star，就會跳轉(zhuǎn)到star.

我也嘗試在main.js中watch global.CLIENT_ID，但報錯說遞歸太多。

請給我一個思路，或者相關(guān)代碼，謝謝。