2021-03-25

全局路由守卫

解决用户还没登录时就直接显示首页内容的问题

通过全局路由守卫 - 导航守卫 - 全局前置守卫，在进入页面之前就对内容进行拦截 判断用户是否登录

• 全局前置守卫

//全局前置守卫分别是to、from、next有三个参数
router.beforeEach((to,from,next)=>{
	conslole.log（to）//我们要跳转的路由
	conslole.log（from）//表示我们从哪个路由跳转过来
	conslole.log（next）//控制下一步的跳转
})

• 配置全局守卫

const router=new VueRouter({
   routes
})
router.beforeEach((to,from,next)=>{
   conslole.log（to）
   conslole.log（from）
   conslole.log（next）
})
export default router

• 通过next我们可以跳转路径

next({name:"login"})

以上就是简单的全局前置守卫介绍

• 解决用户还没登录时就直接显示首页内容的问题

  1.先用token判断用户是否登录

      //获取本地存储的token
     let token = window.sessionStorage.getItem("token")
     //判断用户是否登录
     if(token){
     	//用户已登陆
     }else{
     	//用户未登录
     }
  

  2.如果没有登录则前往登录页

  //判断当前是否在登录页
  	if(to.path==="/login"){
  	//在登录页终止
  		return next()
  	}
  	//否则就强制去登录页，并设置未登录提示信息
  	Vue.prototype.$message("请登录")
  	next({name:"login"})
  

• 解决用户登录成功后还能返回登录页的问题

  1.判断当前是否是登录页，如果在登录页就返回上一级并终止，否则就在index页面

  	if(to.path==="/login"){
  		return next({name:from.name})
  	}
  	next()