vue项目登录请求携带token

最新推荐文章于 2024-12-09 16:05:03 发布

原创最新推荐文章于 2024-12-09 16:05:03 发布 · 6.3k 阅读

27 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #elementui

这篇博客介绍了如何在登录接口中获取并存储token，以及如何在axios请求拦截器中获取本地存储的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)
//     })
//     })
//    }