上一次说了vue+webapi+jwt做token验证时需要注意的一些问题，没有在axios中使用拦截器，而是通过参数的方式提交token，这就导致每一个api的实体类中都要有个token，容易理解和实现，但烦啊，下面是用拦截器实现的。
1、axios拦截器的实现
这是js中的代码
import axios from ‘axios‘ //Post方法的封装 export function axiosPost(url,params){ return new Promise((resolve, reject) => { //以下部分是拦截器功能 axios.interceptors.request.use(config=>{ const token=localStorage.getItem(‘token‘) if(token){ config.headers.authorization=token } console.log(token) return config },err=>{ }) //下面是正常的 axios({ url: url, method: ‘post‘, data: params, headers: { ‘Content-Type‘:‘application/json‘ } }) .then(res=>{ resolve(res.data); }); }); }
其中token的值先通过没有拦截器的方式获取到，并存储到本地。
在组件中使用的时候先引用一下，直接用就行了
<script> import {axiosPost} from ‘../assets/webpost‘; export default { name:‘wenjuanlist‘, data(){ return{
2、后端webapi过滤器中读取header中的值
现在只需要一句话就实现了从headers中获取前端拦截器中增加的值了
context.HttpContext.Request.Headers["authorization"].FirstOrDefault();
//获取token object tokenobj = context.ActionArguments["user"]; string ss = context.HttpContext.Request.Headers["authorization"].FirstOrDefault(); if (tokenobj == null) { ret.Code = 201; ret.Msg = "token不能为空"; context.Result = new JsonResult(ret); return; } Boolean success = false; string token = tokenobj.GetType().GetProperty("Token").GetValue(tokenobj).ToString();
为了对比， 没有去除原来获取token的方式。