前言因为业务性质，之前的项目其实并没有做账号管理，默认登录。最近需要进行账号权限管理，所以需要在api请求中验证token。当前端逻辑登录时，后端返回一个token。登录成功，将token写入sessionStorage/localStorage。Vuex存储令牌。axios拦截请求，通过请求头判断token是否存在。如果存在，则设置自定义字段config.headers.Token=tokenaxios拦截响应并获取HTTP状态。如果状态为401，表示未登录/登录过期，本地相关token信息，跳转到登录页面。其他设置Content-Type、数据格式化跨域相关设置withCredentials、crossDomain后端逻辑设置支持自定义字段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，发送带有请求头的tokenaxios.defaults.withCredentials=true;axios.defaults.crossDomain=true;axios.interceptors.request.use((config)=>{config.headers={'Content-Type':'application/x-www-form-urlencoded'}lettoken=store.state.token;if(token){config.headers.Token=token;}config.data=qs.stringify(config.data,{arrayFormat:'brackets'});returnconfig;});//响应拦截：ifhttp状态401，然后需要登录，清除token，跳转到登录页面axios.interceptors.response.use(res=>{returnres},error=>{if(error.response&&error.response.status===401){store.commit('clearToken')router.replace({path:'/login',})}returnPromise.reject(error.response?error.response.data:error)})
