nuxtjs是一个服务端渲染的框架，它的生命周期中有仅在服务端执行的，有仅在客户端执行的，有服务端和客户端执行的。
我们在保存登录态token到缓存中的时候，如果页面不刷新跳转，则钩子方法在客户端执行，token则在document对象上；如果页面刷新，则钩子方法执行在服务端，token则在请求头中。
解决这两种情况的兼容：
1、在封装axios的时候，在请求回调中判断window对象是否存在，拿到token然后再放请求头中。
// 请求回调 $axios.onRequest(config => { if (!config.headers.token) { let decodedCookie = decodeURIComponent(typeof window === "undefined" ? req.headers.cookie : document.cookie); config.headers.token = common.getCookie(decodedCookie, ‘token‘) } })
2、在需要进行页面权限需要token验证的时候，则需要在middleware文件夹下新建一个auth.js文件来来检验。
export default async function ({ route, req, $axios, redirect, common }) { let isAdmin = /^\/admin/ig.test(route.path) if (isAdmin) { let decodedCookie = decodeURIComponent(typeof window === "undefined" ? req.headers.cookie : document.cookie); let token = common.getCookie(decodedCookie, ‘token‘) if (token) { $axios.defaults.headers[‘token‘] = token let res = await $axios.post(‘/server/verifyToken‘) if (res.errcode !== 0) { redirect(‘/login‘) } } else { redirect(‘/login‘) } } }
然后在nuxt.config.js中修改：
plugins: [ src: "@/plugins/axios" } ], modules: [ ‘@nuxtjs/axios‘ ], router: { middleware: ‘auth‘, scrollBehavior(to, from, savedPosition) { return { x: 0, y: 0 } } }