nuxt导航守卫,有两种方式
- 中间件 middleware
使用中间件方式,则需要在nuxt.config.js中的module进行配置
router: {
middleware: "auth", // 可以为任何名称,然后建立相对应的js文件
},
auth.js 文件
export default function ({ store, route, redirect, params, query, req, res }) {
console.log("middleware auth");
// 访问 about路由,则会跳转到home页面
if (route.name === "about") {
redirect("/home");
}
}
上述是全局配置中间件,同样,也可以局部配置中间件,针对单个vue文件进行操作
- 插件 plugin 进行导航守卫,也需要在nuxt.config.js中进行配置
plugins: ["~/plugins/router.js"],
若是如上配置,则需要在根目录下建立plugins/router.js文件
router.js 文件,与vue-router写法一致,可写路由前,也可写路由后处理逻辑
export default ({ app, redirect }) => {
// 与vue-router写法一致,可写路由前,也可写路由后处理逻辑
app.router.beforeEach((to, from, next) => {
console.log("router.js to", to);
if (to.name === "home") {
redirect("/list");
}
next();
});
};
注意:若是同时配置了middleware和plugin进行导航守卫的话,执行顺序是先走middleware,再走plugin守卫,后面会覆盖前面的操作,一定要注意。
导航守卫期间,发生在服务端,服务端无法获取到localStorage(localStorage属于客户端缓存),解决方案如下:
- 安装 cookie-universal-nuxt 插件
npm i cookie-universal-nuxt -S
- 在nuxt.config.js 中进行配置
modules: [
"cookie-universal-nuxt",
// "@nuxtjs/router"
],
- 然后可以使用插件里提供的方法如:
// 设置 cookie
this.$cookies.set('token','123456')
// 获取 cookie
this.$cookies.get('token')