Vue 导航前置守卫router.beforeEach()的用法，实现自动登录

正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航（也就是路由拦截），一般用于访问某些页面的限制，如是否登录或者是否有权限等。

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于等待中。

每个守卫方法接收两个参数：

• to: 即将要进入的目标 
• from: 当前导航正要离开的路由 

详情可以查看官方文档=>官方文档：导航首位|Vue Router

示例： 

第一步，设置路由是否需要进行验证，true为需要，false为不需要。（@/router/index.js）

path: '/',
redirect: '/home',
name: 'home',
component: Index,
meta: { 
  requireAuth: true
  // true为需要，false为不需要
}

 第二步，在登陆成功的时候，使用localStorage保存用户账号信息。（@/views/login.vue）

// 判断有无已保存账号信息
if (JSON.parse(localStorage.getItem('user') !== null)) {
  localStorage.removeItem('user')
}
// 永久本地保存账号密码，用于自动登录
const user = {
  id: username,
  password: password
}
localStorage.setItem('user', JSON.stringify(user))

第三步，退出登录时，删除保存的账号信息。（@/views/home.vue）

// 移除本地保存账号信息
localStorage.removeItem('user')

第四步，在main.js中设置前置守卫，进行路由拦截。（@/src/main.js）

/** 前置导航守卫，用于进入router前判断是否已登录 */
router.beforeEach((to, from, next) => {
  // 判断打开的router是否需要验证登录
  if (to.meta.requireAuth) {
    // 判断是否已登录
    if (JSON.parse(localStorage.getItem('user')) !== null) {
      // 正常跳转
      next()
    } else {
      // 转回登录界面
      next({path: '/login'})
    }
  } else if (JSON.parse(localStorage.getItem('user')) !== null) {
    // 已登录情况下，拒绝去login页，跳转去主页面
    next({path: '/'})
  } else {
    // 正常跳转
    next()
  }
})