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

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

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

上一篇:几种常用移动端和pc端兼容标准


下一篇:mysql安装error:the security setting could not be applied【转】