nuxt实现封装axios并且获取token
作者:这个杀手好冷
这篇文章主要介绍了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}`)
])
}总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
