技術標籤：前端

參考實現由：vue2.0 實現導航守衛（路由守衛）

然後路由那裡做全域性，判斷是否登陸，沒有登陸強制跳轉到登陸頁面。

import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);

const subRoutes = [
 
{
    path: "/",
    name: "home",
    component: () => import("../views/services/home/Index"),
}, {
    path: "/phoneAdmin",
    name: "phoneAdmin",
    component: () => import("../views/services/phoneAdmin/Index"),
    children: []
}, {
    path: "/people",
    name: "people",
    component: () => import("../views/services/policy/Index")
}, 
{
    path: "/ota",
    name: "ota",
    component: () => import("../views/services/ota/Index")
},
{
    path: "/userAdmin",
    name: "userAdmin",//userAdmin1
    component: () => import("../views/services/userAdmin/Index"),
    children: [{
        path: "/userAdmin/SubPage",// 
        name: "SubPage", //名稱與上面不能重複SubPage1
        component: () => import("../views/services/userAdmin/SubPage"),
    },{
        path: "/userAdmin/SubPagePersonnel",
        name: "SubPagePersonnel", //名稱與上面不能重複
        component: () => import("../views/services/userAdmin/SubPagePersonnel")
    },{
        path: "/userAdmin/BtruncContacts",
        name: "BtruncContacts", //名稱與上面不能重複
        component: () => import("../views/services/userAdmin/BtruncContacts")
    }]
},
{
    path: "/setting",
    name: "setting",
    component: () => import("../views/services/setting/Index"),
    children: [{
        path: "/setting/Account",// 
        name: "Account", //名稱與上面不能重複
        component: () => import("../views/services/setting/Account"),
    }]
},

];

// export default 
const router = new Router({
    routes: [
        {
            path: '*', // 預設進入路由
            redirect: '/home'  //重定向
        },
        {
            path: "/main",
            name: "layout",
            component: () => import("../views/layout/main/Index"),
            children: subRoutes,
            redirect: {name: subRoutes[0].name}
        },{
            path: "/login",
            name: "login",
            component: () => import("../views/services/login/Index")
        },
        {
            path: '**',  // 錯誤路由
            redirect: '/home'  //重定向
        },
   ]
});

// 解決ElementUI導航欄中的vue-router在3.0版本以上重複點選單報錯問題
const originalPush = Router.prototype.push
Router.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => err)
}

// 全域性路由守衛
router.beforeEach((to, from, next) => {
    console.log('navigation-guards');
    // to: Route: 即將要進入的目標 路由物件
    // from: Route: 當前導航正要離開的路由
    // next: Function: 一定要呼叫該方法來 resolve 這個鉤子。執行效果依賴 next 方法的呼叫引數。
    
    const nextRoute = ['home', 'phoneAdmin', 'policy', 'userAdmin1'];
    let isLogin = document.cookie.length; // 是否登入，判斷cookie有沒有值

    // 未登入狀態；當路由到nextRoute指定頁時，跳轉至login
    if (nextRoute.indexOf(to.name) >= 0) { 
        if (isLogin===0) {
            this.$alert('未登陸，請先登陸！', '警告', {
                confirmButtonText: '確定',
                // callback: action => {
                //     this.$message({
                //     type: 'info',
                //     message: `action: ${ action }`
                //     });
                // }
            });
            router.push({ name: 'login' })
        }
    }
    //  已登入狀態；當路由到login時，跳轉至home 
    // if (to.name === 'login') {//未登入時，點選其他介面會提示，並直接自動調轉到登陸介面
    //     // if (isLogin!=0) {
    //     //     router.push({ name: 'home' });
    //     // };
    // }
    next();
});export default router;
 

但是有些缺點，大家可以思考，然後再評論如何解決：

1.比如你登陸後在某個頁面，隔了一夜後，你不切換頁面或不重新整理當前頁面，你可以在當前操作一些功能，判斷不實時。

2.我們頁面一般登陸後頁面某個地方會顯示 “管理員：張三0001 已登入”等字樣，如果沒有登陸顯示：“未登入”等字樣，未登入時點此地方就會跳轉登陸介面，可全域性守衛就看不到這個功能，一檢查到沒有登陸自動跳轉了。