web页面判断是否登陆，未登陆时自动跳转（全局守卫）

然后路由那里做全局，判断是否登陆，没有登陆强制跳转到登陆页面。

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 已登录”等字样，如果没有登陆显示：“未登录”等字样，未登录时点此地方就会跳转登陆界面，可全局守卫就看不到这个功能，一检查到没有登陆自动跳转了。

web页面判断是否登陆，未登陆时自动跳转（全局守卫）

猜你喜欢