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;