Vue全局前置守卫

全局前置守卫

1.to是将要访问的路由的信息对象

2.from是将要离开路由的信息对象

3.next是一个函数，调用next() 表示放行，允许这次路由通行

next函数的3种调用方式
	当前用户拥有后台主页的访问权限，直接放行: next()
	当前用户没有后台主页的访问权限，强制其跳转到登录页面: next(/login')
	当前用户没有后台主页的访问权限，不允许跳转到后台主页: next(false)

// 为 router 实例对象，声明全局前置导航守卫
// 只要发生了路由的跳转，必然会触发 beforeEach 指定的 function 回调函数
router.beforeEach(function(to, from, next) {
  // to 表示将要访问的路由的信息对象
  // from 表示将要离开的路由的信息对象
  // next() 函数表示放行的意思
  // 分析：
  // 1. 要拿到用户将要访问的 hash 地址
  // 2. 判断 hash 地址是否等于 /main。
  // 2.1 如果等于 /main，证明需要登录之后，才能访问成功
  // 2.2 如果不等于 /main，则不需要登录，直接放行  next()
  // 3. 如果访问的地址是 /main。则需要读取 localStorage 中的 token 值
  // 3.1 如果有 token，则放行
  // 3.2 如果没有 token，则强制跳转到 /login 登录页
  if (to.path === '/main') {
    // 要访问后台主页，需要判断是否有 token
    const token = localStorage.getItem('token')
    if (token) {
      next()
    } else {
      // 没有登录，强制跳转到登录页
      next('/login')
    }
    //如果访问的不是/main 则直接放行
  } else {
    next()
  }
})