vue项目登录请求携带token
请求头携带token
·
1.在登录接口中获取token并存储
login(params).then(res=>{
if(res != ''){
this.$message.success('登陆成功')
sessionStorage.setItem('token',res)//存储到本地 res 是后端返回的token
this.$router.push('/home')
}else{
this.$message.error('登陆失败')
}
})
2.在请求头中获取到本地存储的token
// 请求拦截器
axios.interceptors.request.use(
config => {
// token && (config.headers.Authorization = token)
const token = sessionStorage.getItem('token');
token && (config.headers.token = token) //在请求头中添加
return config
},
error => {
return Promise.error(error)
})
axios封装
import axios from 'axios'
// 环境的切换
if (process.env.NODE_ENV === 'development') {
axios.defaults.baseURL = '/api'
} else if (process.env.NODE_ENV === 'production') {
axios.defaults.baseURL = ''
}
// 请求拦截器
axios.interceptors.request.use(
config => {
// token && (config.headers.Authorization = token)
const token = sessionStorage.getItem('token');
token && (config.headers.token = token)
return config
},
error => {
return Promise.error(error)
})
axios.defaults.timeout = 60000
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
// 响应拦截器
axios.interceptors.response.use(response => {
if (response.status === 200) {
return Promise.resolve(response)
} else {
return Promise.reject(response)
}
}, error => {
if (error.response.status) {
// 对不同返回码对相应处理
return Promise.reject(error.response)
}
})
// get 请求
export function httpGet({
url,
params = {}
}) {
return new Promise((resolve, reject) => {
axios.get(url, {
params
}).then((res) => {
resolve(res.data)
}).catch(err => {
reject(err)
})
})
}
//delete 请求
export function httpDelete({
url,
data ={}
}) {
return new Promise((resolve)=>{
axios({
url,
method:"delete",
data
}).then((res)=>{
resolve(res.data)
})
})
}
// post请求
export function httpPost({
url,
data = {},
params = {}
}) {
return new Promise((resolve) => {
axios({
url,
method: 'post',
transformRequest: [function (data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
// 发送的数据
data,
// url参数
params
}).then(res => {
resolve(res.data)
})
})
}
//put请求
export function httpPut({
url,
data = {},
params = {}
}) {
return new Promise((resolve) => {
axios({
url,
method: 'put',
transformRequest: [function (data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
// 发送的数据
data,
// url参数
params
}).then(res => {
resolve(res.data)
})
})
}
//delete请求
// export function httpDelete({
// url,
// data = {},
// params = {}
// }) {
// return new Promise((resolve) => {
// axios({
// url,
// method: 'delete',
// transformRequest: [function (data) {
// let ret = ''
// for (let it in data) {
// ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
// }
// return ret
// }],
// // 发送的数据
// data,
// // url参数
// params
// }).then(res => {
// resolve(res.data)
// })
// })
// }
更多推荐
已为社区贡献5条内容
所有评论(0)