首页 > 移动平台 > 详细

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

时间:2020-06-17 18:37:57      阅读:98      评论:0      收藏:0      [点我收藏+]

上一次说了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中读取的实现

原文:https://www.cnblogs.com/wjbych/p/13153921.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!