bug:localStorage不存在

  • 在SSR中,created生命周期在服务端执行,node环境中没有localStorage所以会报错,
  • 将需要使用localStorage的代码放到浏览器使用的生命周期(mounted)中。
  • 配置文件配置axios文件不在服务端渲染 { src: ‘@/plugins/axios’, ssr: false }

axios封装 plugins/axios.js

let mesId = ''
import { Message, Notification } from 'element-ui'
export default ({ $axios, app, store }) => {
  //Request拦截器,设置token
  $axios.onRequest((config) => {
    config.headers['Authorization'] = store.state.token
    config.headers['Classid'] = store.state.classId
    config.baseURL = '/prod-api'
  })

  $axios.onResponse((response) => {
    if (response.data.code === 200) {
      return Promise.resolve(response.data)
    } else if (response.data.code === 401) {
      // 解决同一个页面接口过多一大推提示
      if (!mesId) {
        mesId = Message.warning('请登录后再操作');
        let id = setTimeout(() => {
          mesId = ''
          clearTimeout(id)
        }, 5000)
      }
      store.commit('exitLogin')
      app.$bus.$emit('toLogin')
    } else if (response.data.type != undefined) {
      return Promise.resolve(response.data)
    } else {
      Message.error(response.data.msg);
      return Promise.reject(response.data)
    }
  })

  // 错误回调
  $axios.onError((error) => {

  })
}

nuxt.config.js

plugins: [
    '@/plugins/element-ui',
    { src: '@/plugins/utils', ssr: false },// axios.js文件关闭服务端渲染
    { src: '@/plugins/axios', ssr: false }, // axios.js文件关闭服务端渲染
    { src: "~/plugins/swiper.js", ssr: false },
    { src: '~/plugins/store-cache', ssr: false },
    { src: '~/plugins/flexiable.js', ssr: false },
    { src: '@/plugins/bus', ssr: false },
    { src: '~plugins/echarts', ssr: false },
  ],

  
  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],
  // 需要代理,可以打开底下的注释
  axios: {
    proxy: true // Can be also an object with default options
  },

  proxy: {
    '/prod-api': {
      changeOrigin: true,
      // target: 'http://192.168.2.81:8087', //康康
      // target: 'http://192.168.2.90:8087', //京邦
      // target: "http://192.168.2.190:8087", //康颂
      "target": "http://192.168.0.19:1002", // 测试
      pathRewrite: {
        '^/prod-api': ''
      }
    }
  },

调用接口

  async asyncData ({ params, $axios }) {
    const { data } = await $axios.get(`/articles/index?pageIndex=1`)
    return { data, page: 1 }
  }
  
  async asyncData ({ params, $axios }) {
    const [articles, category] = await Promise.all([
      $axios.$get(`/articles/category/${params.id}`),
      $axios.$get(`/categories/${params.id}`)
    ])
  }

  this.$axios.get('url', { params:{} })
  this.$axios.post('url', {})

  // ****** put请求有三种传参方式
     // 1、url/id
     // 2、post传参  url,data
     // 3、get传参  url,null,{params:data} 第二个参数需要传null
  this.$axios.put('/course/periodUser', {
       periodId: id,
       watchDuration: time
  }).then(res => { })
  
  this.$axios.put('/system/user/profile/updatePwd', null, {
       params: {
              oldPassword: this.user.oldPassword,
              newPassword: this.user.newPassword
          }
       }).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.$refs["form"].resetFields();
       }
  );

 this.$axios.delete('/exam/exam-history/record/' + id).then(res => {});
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐