vue路由守卫 - 全局

前言

vue中用路由守卫来做是否登陆判断，此处我以后台管理项目为例，如下图：

admin.jpg

主要方法：

router.beforeEach((to,from,next)=>{ })

• to：进入到哪个路由去
• from：从哪个路由离开
• next：路由的控制参数，常用的有next(true)和next(false)

首先判断进入的是否是login页面？然后再判断是否已经登陆？
已经登陆了就进入你要跳转的页面，没登录就进入login页面

为了更加明显一点，我将页面命名的简单一些，ps：

• Login.vue是登陆页面
• Index.vue是全局页面（包含公共导航组件）
  A.vue是普通页面（此处我做为首页）
  B.vue是普通页面
• 404.vue是走丢了的404页面

实现代码

//router.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router);

const children = [
  {
    path: 'a',
    name: 'a',
    component: () => import('./views/A.vue'),
    meta: {
      title: 'a页面',
      keepAlive: false // 无缓存
    }
  },
  {
    path: 'b',
    name: 'b',
    component: () => import('./views/B.vue'),
    meta: {
      title: 'b页面',
      keepAlive: true // 有缓存
    }
  },
  {
    path: '404',
    name: '404',
    component: () => import('./components/404.vue')
  }
];
const router =  new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    { path: '/', redirect: '/a' },
    { path: '*', redirect: '/404' },
    {
      path: '/login',
      name: 'login',
      component: () => import('./components/Login.vue')
    },
    {
      path: '/',
      component: () => import('./components/Index.vue'), //index是上图左边的公共菜单
      children  //此处是站内页面，页面在右侧container里展示
    }
  ]
});
router.beforeEach((to, from, next) => {
  const isLogin = sessionStorage.getItem('isLogin'); //获取本地存储的登陆信息
  if (to.name == 'login') { //判断是否进入的login页
    if (isLogin == "true") {  //判断是否登陆
      next({ name: 'a'});  //已登录，跳转首页（a页面）
    } else {
      next();  //没登录，继续进入login页
    }
  } else { //如果进入的非login页
    if (isLogin == "true") {   //同样判断是否登陆
      next();  //已登录，正常进入
    } else {
      next({ name: 'login'});  //没登录，跳转到login页
    }
  }
});
export default router;