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

Posted 宝鼎波波

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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中读取的实现的主要内容,如果未能解决你的问题,请参考以下文章

Vue+axios 实现http拦截及路由拦截

vue+axios实现http拦截及路由拦截

vue+axios实现http拦截及路由拦截

Vue+axios 实现http拦截及路由拦截

vue+axios 前端实现登录拦截(路由拦截http拦截)

vue+axios 前端实现登录拦截(路由拦截http拦截)