nuxt实现封装axios并且获取token

 更新时间:2023年10月12日 08:39:16   作者:这个杀手好冷  
这篇文章主要介绍了nuxt实现封装axios并且获取token,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

nuxt封装axios并且获取token

axios 多环节变量配置不同地址

npm安装方式

npm i --D cross-env

  "scripts": {
    "dev": "cross-env process.env.__ENV=测试地址 nuxt",
    "build": "cross-env process.env.__ENV=打包地址 nuxt build",
    "start": "nuxt start",
    "export": "nuxt export",
    "serve": "nuxt serve"
  },

nuxt.config.js配置

env: {
  __ENV: process.env.__ENV
},

axios全局使用的时候

axios.defaults.baseURL?=?process.env.__ENV

nuxt 服务端进行请求时带上token

期望结果:在服务端、客户端请求时候带上token

实现方式:把请求的cookie放到header里

如果没有 安装 cookie-universal-nuxt 需要安装一下插件

//修改 nuxt.config.js
//添加模块
  modules: [
    'cookie-universal-nuxt',
    "@nuxtjs/axios",
  ]
//添加插件引用
  plugins:[
    '@/plugins/axios',
  ]
//添加插件文件 plugins/axios.js
let isClient = process.env.VUE_ENV === 'client' //区分端
export default ({ redirect, $axios, app }) => {
  $axios.onRequest(config => {
    return new Promise((resolve, reject) => {
      //match api
      let token = app.$cookies.get('token')
      //add token
      if (token) config.headers.Authorization = token;
      //其他的请求前业务逻辑 比如:api map
      resolve(config);
    })
  });
  $axios.onResponse(res => {
    return new Promise((resolve, reject) => {
      //返回数据逻辑处理 比如:error_code错误处理
      resolve(res.data);
    })
  });
  $axios.onError(config => {
    console.log('Making request to ' + config.url)
  })
};

nuxt——nuxt.axios的使用

bug:localStorage不存在

在SSR中,created生命周期在服务端执行,node环境中没有localStorage所以会报错,

将需要使用localStorage的代码放到浏览器使用的生命周期(mounted)中。

配置文件配置axios文件不在服务端渲染 { src: ‘@/plugins/axios’, ssr: false }

axios封装 plugins/axios.js

import { Message, Notification } from 'element-ui'
import Cookie from 'js-cookie'
export default function (app) {
  const axios = app.$axios
  // 基本配置
  axios.defaults.timeout = 10000
  axios.defaults.headers.post['Content-Type'] = 'application/json'
  axios.defaults.headers.patch['Content-Type'] = 'application/json'
  axios.defaults.headers.put['Content-Type'] = 'application/json'
  // 请求回调(若token从localStorage获取,接口只能在mounted之后调用)
  axios.onRequest((config) => {
    const token = Cookie.get('token')
    config.headers.Authorization = token 
  })
  // 返回回调
  axios.onResponse((response) => {
    console.log(8888,response.data)
    if (response.data.code === 200) {
      return Promise.resolve(response.data)
    } else if (response.data.code === 401) {
      Message.error('请登录后再操作');
    } else {
      Message.error(response.data.msg);
      return Promise.reject(response.data)
    }
  })
  // 错误回调
  axios.onError((error) => {
    switch (error.response.status) {
      case 401:
        location.href = '/login'
        break
    }
  })
}
// 	nuxt.config.js
plugins: [
    '@/plugins/element-ui',
    '@/plugins/axios',
    //{ src: '@/plugins/axios', ssr: false } 关闭服务端渲染
  ],
//找到modules模块,把proxy添加到里面
 modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],
 axios: {
    proxy: true // Can be also an object with default options
  },
  proxy: {
      '/api': {
      changeOrigin: true,
      target: 'http://127.0.0.1:8082', // 允许跨域的服务器地址
      pathRewrite: {
        '^/api': ''
      }
     }
 }

调用接口

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

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue常用API、高级API的相关总结

    Vue常用API、高级API的相关总结

    这篇文章主要介绍了Vue常用API、高级API的相关总结,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-02-02
  • vue element-ui实现动态面包屑导航

    vue element-ui实现动态面包屑导航

    这篇文章主要为大家详细介绍了vue element-ui实现动态面包屑导航,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • vue商城中商品“筛选器”功能的实现代码

    vue商城中商品“筛选器”功能的实现代码

    这篇文章主要介绍了vue商城中商品“筛选器”功能的实现,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-07-07
  • 在Vue组件中使用 TypeScript的方法

    在Vue组件中使用 TypeScript的方法

    typescript不仅可以约束我们的编码习惯,还能起到注释的作用,当我们看到一函数后我们立马就能知道这个函数的用法。这篇文章主要介绍了在Vue组件中使用 TypeScript的方法,需要的朋友可以参考下
    2018-02-02
  • 解决ElementUI中tooltip出现无法显示的问题

    解决ElementUI中tooltip出现无法显示的问题

    这篇文章主要介绍了解决ElementUI中tooltip出现无法显示的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • vue路由跳转后刷新指定页面的方法

    vue路由跳转后刷新指定页面的方法

    这篇文章主要介绍了vue路由跳转后刷新指定页面的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-12-12
  • vue3 中使用 reactive 的问题小结

    vue3 中使用 reactive 的问题小结

    在 Vue 3 中,如果你使用 reactive 来定义一个响应式对象,那么这个对象的属性是不能被重新赋值的,因为 reactive 会将对象的属性转换为 getter/setter,这样 Vue 才能追踪到属性的变化,这篇文章主要介绍了vue3 中使用 reactive 的问题,需要的朋友可以参考下
    2024-03-03
  • vue2.0中组件传值的几种方式总结

    vue2.0中组件传值的几种方式总结

    这篇文章主要介绍了vue2.0中组件传值的几种方式总结,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • vue2如何使用vue-i18n搭建多语言切换环境

    vue2如何使用vue-i18n搭建多语言切换环境

    这篇文章主要介绍了vue2-使用vue-i18n搭建多语言切换环境的相关知识,在data(){}中获取的变量存在更新this.$i18n.locale的值时无法自动切换的问题,需要刷新页面才能切换语言,感兴趣的朋友一起看看吧
    2023-12-12
  • Vue中iframe 结合 window.postMessage 实现跨域通信

    Vue中iframe 结合 window.postMessage 实现跨域通信

    window.postMessage() 方法可以安全地实现跨源通信,在一个项目的页面中嵌入另一个项目的页面,需要实现父子,子父页面的通信,对Vue中iframe 结合 window.postMessage 实现跨域通信相关知识感兴趣的朋友跟随小编一起看看吧
    2022-12-12

最新评论