路由守卫

全局路由守卫
  前置
      依赖中间件 middleware, 插件
      全局守卫： nuxt.config 指向 middleware
                layouts 定义中间件
      组件独享守卫：
                middleware
      插件全局后置守卫
  后置
      使用vue的beforeRouterLeave 钩子
      插件全局后置守卫

nuxt.config 指向 middleware

router: {
    middleware: 'auth', // 会调用middleware 目录下auth
}

auth.js

export default ({store,route,redirect,parmas,query}) => {
  // context 服务端上下文信息
  // 全局守卫业务
  console.log('middlware 全局守卫')
  redirect('/login')
}

layouts 定义中间件

 middleware({store,route,redirect,parmas,query}) {
    // context 服务端上下文信息
    // 全局守卫业务
    console.log('middlware 全局守卫')
    redirect('/user')
  },

组件独享路由守卫

middleware({store,route,redirect,parmas,query}) {
    // 组件内独享路由守卫
    redirect('/login')
  },

插件守卫

nuxt.config

  plugins: [
    '~/plugins/router.js'
  ],

router.js 文件
export default ({ app, redirect }) => {
  console.log('插件')
  // 可以拿得到 vue 实例 里面就有vue 所有api
  app.router.beforeEach((to, from, next) => {
    console.log(to.path === '/index')
    if(to.path === '/index') {
      redirect('/login')
    } else {
      next(true)
    }
    // 这里next 只能next(true)或next(false) 如果要跳到某个页面要用redircet
  })

  // 后置守卫
  app.router.afterEach((to, from) => {
    console.log('后置守卫', to)
  })
}