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 } } }