nuxtjs之前端持久登錄態


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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM