nuxt框架中的数据持久化最优解+请求拦截器封装

秒速五厘米 2023-10-02 15:56 24阅读 0赞

**目录**

前言：

1.nuxt项目中的持久化

1.1 Nuxt 有一个 cookie-universal-nuxt 模块来供服务端操作Cookie值 。

1.2 修改根目录下的 nuxt.config.js，在modules中添加

1.3.在store目录下的index,js里面有个 nuxtServerInit 方法

1.4.页面使用

1.5. 如果报错：Cannot read property 'get' of undefined

2.请求拦截器的封装

--------------------

### 前言： ###

> **最近掉进了nuxt.js + ts 项目开发这个坑，今日心态炸裂，吐血整理。**

--------------------

### 1.nuxt项目中的持久化 ###

--------------------

#### 1.1 Nuxt 有一个 cookie-universal-nuxt 模块来供服务端操作Cookie值 。 ####

npm install cookie-universal-nuxt
    
    使用方法：
    提取：data.userInfo = app.$cookies.get('userInfo')
    设置：this.$cookies.set("userInfo",this.formData.mobile,{maxAge:60*60*24*3}) //保存3天

--------------------

#### 1.2 修改根目录下的 nuxt.config.js，在modules中添加 ####

modules: [
    '@nuxtjs/axios',
    'cookie-universal-nuxt', // ++++
    ],

--------------------

#### 3.在store目录下的index,js里面有个 nuxtServerInit 方法 ####

// 定义行为
    const actions = {
    // 服务端调用
    nuxtServerInit ({ commit }, { app }) {
    const data = {}
    data.userInfo = app.$cookies.get(Key.userInfoKey)
    data.accessToken = app.$cookies.get(Key.accessTokenKey)
    data.refreshToken = app.$cookies.get(Key.refreshTokenKey)
    data.redirectURL = app.$cookies.get(Key.redirectURLKey)
    commit('UPDATE_ALL_STATE', data)
    },
    // ....
    m

--------------------

#### 4.页面使用 ####

测试，
    在 components/layout/Header.vue 中使用
    this.$store.state.userInfo 可以获取到数据

--------------------

#### 5. 如果报错：Cannot read property 'get' of undefined ####

> 解决：查看 mengxuegu-blog-web\\nuxt.config.js 文件中后面是否还有 modules: \[ \]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_12_color_FFFFFF_t_70_g_se_x_16][]

--------------------

### 2.请求拦截器的封装 ###

> **大体分为两步，在plaugins里面建一个.js或者.ts文件，然后在nuxt.config.js中注册，最后重启项目**

附上自己封装的拦截器，分为.js版本和ts版本，以供参考：

export default({store, route, redirect, $axios}) => {
    
        $axios.onRequest(config => {
            alert(config)
            // console.log("请求拦截器")
            const accessToken = store.state.accessToken
            if(accessToken) {
                // Authorization: Bearer token
                config.headers.Authorization = 'Bearer ' + accessToken
                
            }
            // 请求头添加token
            return config
        })
    
        $axios.onResponse(response => {
            // console.log('响应拦截器：', response)
            // if(!store.state.accessToken) {
            //     sendRefreshRequest(route, store, redirect)
            // }
            return response
        })
    
        $axios.onError(error => {
            // console.log('响应异常：', error.response.status)
            if(error.response.status != 401 ) {
                return Promise.reject(error)
            }
            // 401 发送刷新获取新令牌
            sendRefreshRequest(route, store, redirect)
            return  Promise.reject('令牌过期，重新登录')
        })
    
    }
    
    let isLock = true // 防止并发重复发送刷新令牌请求， true 还未发送，false正在请求刷新
     
    const sendRefreshRequest = (route, store, redirect) => {
       
        if(isLock && store.state.refreshToken) {
            isLock = false
            // 发送请求到认证客户端，通过刷新令牌获取新令牌
            redirect(`${process.env.authURL}/refresh?redirectURL=${redirectURL(route)}`)
        }else {
            isLock = true
            // 没有刷新令牌，跳转到登录页
            // 重置用户状态
            // console.log('跳转到登录页')
            store.commit('RESET_USER_STATE')
            // 跳转到登录页
            
            redirect(`${process.env.authURL}?redirectURL=${redirectURL(route)}`)
        }
    }  
    
    // 获取重定向地址
    const redirectURL = (route) => {
        // 客户端
        if(process.client) {
            return window.location.href
        }
        // 服务端 process.env._AXIOS_BASE_URL_  http://localhost:3000/api   http://blog.mengxuegu.com/api
        return process.env._AXIOS_BASE_URL_.replace('api', '') + route.path
    }

--------------------

import axios, { AxiosInstance, AxiosResponse, AxiosRequestConfig, AxiosError } from 'axios'
    
    const throwErr = (code: number, response: AxiosResponse) => {
      let message: string = '请求错误'
      switch (code) {
        case 400:
          message = '请求错误'
          break
        case 401:
          message = '未授权，请登录'
          break
        case 403:
          message = '拒绝访问'
          break
        case 404:
          message = `请求地址出错: ${response.config.url}`
          break
        case 408:
          message = '请求超时'
          break
        case 500:
          message = '服务器内部错误'
          break
        case 501:
          message = '服务未实现'
          break
        case 502:
          message = '网关错误'
          break
        case 503:
          message = '服务不可用'
          break
        case 504:
          message = '网关超时'
          break
        case 505:
          message = 'HTTP版本不受支持'
          break
        default:
      }
      return message
    }
    
    const requestInterceptors = {
      config: (config: AxiosRequestConfig) => {
        // config.headers = {
        //   'Authorization': 'Bearer'
        // }
        if (config.method && config.params) {
          for (const i in config.params) {
    
            if (config.params[i] == '' && config.params[i] !== 0 && config.params[i] !== false) {
              config.params[i] = null
            }
          }
        }
        return config
      },
      error: (error: AxiosError) => {
        return Promise.reject(error)
      }
    }
    
    const responseInterceptors = {
      response: (response: AxiosResponse) => {
        const res = response.data
        return Promise.resolve(res)
      },
      error: (error: AxiosError) => {
        if (error && error.response) {
          // const res = {
          //   Data: null,
          //   State: error.response.status,
          //   Msg: throwErr(error.response.status, error.response)
          // }
          return Promise.reject(error.response)
        }
      }
    }
    
    class Request {
      protected axiosInstance: AxiosInstance;
      constructor(baseURL: string) {
    
        this.axiosInstance = axios.create({
          baseURL,
          timeout:15000
        })
        this.axiosInstance.interceptors.request.use(requestInterceptors.config, requestInterceptors.error)
        this.axiosInstance.interceptors.response.use(responseInterceptors.response, responseInterceptors.error)
    
    
      }
    }
    export default Request

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_12_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/16d449c1720f4082925700c9edf0ad12.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC,size_12,color_FFFFFF,t_70,g_se,x_16