there are three pages in total. By default, they point to the login page. After logging in, you can store client_id to cookie and global.CLIENT_ID

what I want to do is to check the login status. When the page jumps, check that global.CLIENT_ID or cookie, does not exist and then jump to the login page.

// 
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: "-sharpapp",
    components: {App},
    template: "<App/>",
    router: router
})

I asked some related questions about Baidu. Some people said that router hooks could be used, but I tried

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

    else{
        next();
    }

});

even so, there will be two problems:
1. If you enter http://localhost:8080/-sharp/main directly in the browser address bar, you can skip logical access to main
2. The current page is main,. Clicking star once will jump to login, but clicking star, again will jump to star.

I also tried to watch global.CLIENT_ID, in main.js but mistakenly reported that there was too much recursion.

Please give me a train of thought, or related code, thank you.