H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端技术】vue、axios请求头自定义

前言

因为业务性质原因,之前的项目,其实没有做账号管理,默认登录。
最近要求做账号权限管理,所以需要在api请求中验证token。

前端逻辑

  • 登录的时候后端返回一个token。
  • 登陆成功,token写入sessionStorage/localStorage。
  • vuex存储token。
  • axios拦截请求,请求头判断token是否存在,如果存在,设置自定义字段config.headers.Token = token
  • axios拦截响应,获取HTTP状态,如果状态为401,即未登录/登陆过期,情况本地相关token信息,跳转到登录页。
  • 其他设置Content-Type、数据格式化
  • 跨域相关设置withCredentialscrossDomain

后端逻辑

  • 设置支持自定义字段token。
  • Access-Control-Allow-Headers:x-requested-with,content-type,token
  • 拦截OPTIONS请求,返回200。如果跨域,需要设置跨域允许,否则前端不能正确得到OPTIONS结果。
  • 对于GET/POST请求,检测请求头中的token字段,校验结果决定是否走下一步流程。
  • 如果校验通过,走正常的业务逻辑。否则,设置HTTP状态为401,中断业务流程,返回校验结果。

问题

解决过程中,容易出现以下问题:

  • 前端拦截请求的时候,设置自定义字段,首字母大小写。必须大写
  • 后端处理OPTIONS请求的时候,不能正确设置允许跨域,导致前端不能正确得到OPTIONS请求结果,GET/POST请求没有发出。

结语

问题总是解决不完的,每解决完一个问题,都是一次收获!
附上前端js代码:

//设置post的默认格式为form-data
//请求拦截:如果存在token,则把token带在请求头上发送出去
axios.defaults.withCredentials = true;
axios.defaults.crossDomain = true;
axios.interceptors.request.use((config) => {
    config.headers = {'Content-Type':'application/x-www-form-urlencoded'}
    let token = store.state.token;
    if (token) {
        config.headers.Token = token;
    }
    config.data = qs.stringify(config.data, {arrayFormat: 'brackets'});
    return config;
});
//响应拦截:如果htpp状态401,则是需要登录,清除token,跳转到登录页
axios.interceptors.response.use(res =>{
    return res
}, error => {
    if(error.response && error.response.status === 401){
        store.commit('clearToken')
        router.replace({
            path: '/login',
        })
    }
    return Promise.reject(error.response ? error.response.data : error)
})

本文地址:H5W3 » 【前端技术】vue、axios请求头自定义

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址