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