vue—登录验证

在项目开发中，我们通常会需要在进入主页时（或其他需要判断的情况），判断用户是否登录。

这时，我们需要配置路由的验证方法

const routes={
  routes: [
    {
      path: '/login',
      name:'登录',
      component: login
    },{
      path: '/',
      name:'home',
      component: home,
      redirect:'/personal',
      children:[
        {
          path: '/personal',
          name:'个人中心',
          component: personal,
          meta:{
            requiresAuth:true//是否进行登录验证
          }
        }
      ]
    }
  ]
}

登录验证的方法：

const router=new Router(routes);
router.beforeEach(function (to, from, next) {//to即为要跳转的页面，该页面需要验证时，进行登录验证
  if(to.path === '/login') {
    if (window.sessionStorage.getItem('login')) {
      next({ path:'/home'})
    }
    next()
  } 
  else {
    if(to.meta.requiresAuth && !sessionStorage.getItem('login')) {
      router.push({path: '/login'})
    }else{
      next()
    }
  }
})

这样在打开主页面，代码会加载personal页面，而personal页面需要进行登录验证，则在页面加载前判断是否登录，没有登录则打开登录页，已经登录则继续加载