Nuxt中全局路由守卫的写法

1、在middleware中定义，全局middleware或布局middleware中；（server端执行）

方法一：全局middleware中定义：

a、在middleware文件夹下新建auth.js文件，在此文件中通过上下文对象context.route实现路由拦截；

b、在nuxt.config.js文件的router配置项中引入该中间件；

// auth.js文件：
export default function ({store, route, $axios, redirect, req}) {
  console.log('全局中间件执行了');
  const { name } = route
  const auth = Cookie.get('auth')
  if (!auth && whiteList.indexOf(route.name) === -1 ) {
    return redirect('/login')
  }
}

// nuxt.config.js文件
export default {
    ....
    router:{
        middleware:['auth']   
    }
}

方法二：布局layout中middleware的定义；

  middleware({route, redirect}) {
    console.log('layout中的middleware执行了');
    if(!Cookie.get('auth') && whiteList.indexOf(route.name) === -1 ) {
      return redirect('/login')
    }
  }

2、plugin插件中定义；（client端执行）

a、在plugins文件夹下定义route.js文件，在该文件中通过router.beforeEach前置守卫或router.afterEach后置守卫进行拦截；

b、在nuxt.config.js配置文件中添加该plugin的配置； 

// plugins/route.js文件：
export default ({ app, redirect }) => {
  console.log('全局插件执行了')
  app.router.afterEach((to, from) => {
    if (!Cookie.get('auth') && whiteList.indexOf(to.name) === -1 ) {
      return redirect('/login')
    }
    next()
  })
}


// nuxt.config.js配置文件
export default {
    ....
      plugins: [ 
        { src: '~/plugins/route/route.js', ssr: false }
      ],
}

执行顺序：

server端：

 client:端：

       全局插件plugins；