vue+axios拦截器和webapi中读取的实现

Posted 2020-12-11 宝鼎波波

上一次说了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的方式。