.NET中间件与VUE拦截器联合使用详情

前言:

工作中遇见的问题,边学边弄,记录一下Vue的UI库使用的是antvue 3.2.9版本的。

业务逻辑

特性:

//特性
    public class ModelEsignNameAttribute : Attribute
    {
        public ModelEsignNameAttribute(string nameProp, string id, string reversion = "", ModelESignType eSignType = ModelESignType.Modeling, string middleModelId = "")
        {

        }
    }

接口加上特性:

        /// <summary>
        ///  添加或者修改方法
        /// </summary>
        /// <param name="input"></param>
        /// <returns></returns>
		//特性上添加参数的地址
        [ModelEsignName("Bolg.BolgBaseEditDto.BolgName", "Document.Id", "Bolg.BolgRevision")]
        public async Task<Output> CreateOrUpdate(CreateOrUpdateBolgInput input)
        {
            var doc = await _XXXXManager.FindRdoById(input.Bolg.Id.Value);

            // 文档id为空,新增
            if (doc == null || !input.Bolg.BolgBaseId.HasValue)
            {
                return await this.Create(input.Bolg);
            }

            // 更新
            return await this.Update(input.Bolg);
        }

中间件代码:

namespace GCT.MedPro.Middleware
{
    public class ModelESignCheckMiddleware : IMiddleware
    {
		#region 依赖注入等内容
			....
        #endregion
        public async Task InvokeAsync(HttpContext context, RequestDelegate next)
        {

            if (await ShouldCheckESign(context))
            {
                // 不需要电子签名
                await next(context);
            }

        }
        /// <summary>
        /// 是否需要拦截
        /// </summary>
        /// <param name="actionContext"></param>
        /// <returns></returns>
        private async Task<bool> ShouldCheckESign(HttpContext actionContext)
        {
            var whetherSignature = true;

            var request = actionContext.Request;//获取请求值
            var currentUser = actionContext.User.Identity.Name;
            var serviceAction = actionContext
                    .GetEndpoint()?
                    .Metadata
                    .GetMetadata<ControllerActionDescriptor>();
            if (serviceAction == null)
            {
                return whetherSignature;
            }
            //通过接口特性来筛选是否需要进行拦截
            var attrObj = serviceAction.MethodInfo.CustomAttributes
                .FirstOrDefault(x => x.AttributeType == typeof(ModelEsignNameAttribute));

            if (attrObj == null)
            {
                return whetherSignature;
            }

            string inputbody = default;
            actionContext.Request.EnableBuffering();

            //Post请求获取请求参数,转换JSON
            if (request.Method.ToLower().Equals("post"))
            {
                var requestReader = new StreamReader(actionContext.Request.Body);
                var body = await requestReader.ReadToEndAsync();
                inputbody = UpperFirst(body); //首字母大写    全局搜索可得下方有
            }
            else   //GET请求以及其他方式获取
            {
                var reqString = request.QueryString.Value.Remove(0, 1);
                string[] parts = reqString.Split("&");
                JObject json = new JObject();

                foreach (string part in parts)
                {
                    String[] keyVal = part.Split("=");
                    json.Add(keyVal[0], keyVal[1]);
                }
                inputbody = JsonConvert.SerializeObject(json);
                inputbody = UpperFirst(inputbody);
            }

            var inputObj = JObject.Parse(inputbody);//转换JObject

            #region 获取特性传入的参数,,总五位参数
			var actionName = serviceAction.ActionName;
            var namePath = attrObj.ConstructorArguments[0].Value.ToString();
            var idPath = attrObj.ConstructorArguments[1].Value.ToString();
            var revsionPath = attrObj.ConstructorArguments[2].Value.ToString();
            var typePath = (ModelESignType)attrObj.ConstructorArguments[3].Value;
            var middlePath = attrObj.ConstructorArguments[4].Value.ToString();
        	#endregion
            var middleModelId = GetValueName(inputObj, middlePath);//通过JObject获取对应值
            //接口控制器名称
            var typeName = serviceAction.ControllerTypeInfo.FullName;
            //重置请求Body指针
            actionContext.Request.Body.Position = 0;
            //验证方法,自己写个,自已业务的处理验证
            var output = await CheckSign(middleModelId);

            if (!output.SignStatus)
            {
                actionContext.Request.EnableBuffering();
                Stream originalBody = actionContext.Response.Body;
                try
                {
                    using (var ms = new MemoryStream())
                    {
                        //修改响应状态麻420
                        actionContext.Response.Body = ms;
                        actionContext.Response.StatusCode = 420;
                        ms.Position = 0;
                        //写入数据
                        var responseBody = TextJosn.JsonSerializer.Serialize(output);
                        var memoryStream = new MemoryStream();

                        var sw = new StreamWriter(memoryStream);
                         //自己编辑的实体写入响应体
                        sw.Write(responseBody);
                        sw.Flush();

                        //重置响应指针
                        memoryStream.Position = 0;
                        //复制到原body上
                        await memoryStream.CopyToAsync(originalBody);
                    }
                }
                finally
                {
                    actionContext.Response.Body = originalBody;
                    actionContext.Request.Body.Position = 0;
                }

                whetherSignature = false;
            }
            else
            {
                if (!string.IsNullOrWhiteSpace(output.ErrorMessage))
                {
                    var serializerSettings = new JsonSerializerSettings
                    {
                        // 设置为驼峰命名
                        ContractResolver = new Newtonsoft.Json.Serialization
                            .CamelCasePropertyNamesContractResolver()
                    };
                    //错误友好提示,适配中间件中抛出错误,修改响应体
                    var exception = new UserFriendlyException(output.ErrorMessage);
                    actionContext.Response.StatusCode = 500;
                    actionContext.Response.ContentType = "application/json; charset=utf-8";
                    //写入
                    await actionContext.Response.WriteAsync(
                    JsonConvert.SerializeObject(
                        new AjaxResponse(
                            _errorInfoBuilder.BuildForException(exception),
                            true
                             ), serializerSettings
                         )
                    );
                    whetherSignature = false;
                }
            }

            return whetherSignature;
        }
		//取出json的Name值
        private string GetValueName(JObject inputObj, string path)
        {
            string result = null;
            if (!string.IsNullOrWhiteSpace(path))
            {
                result = inputObj.SelectToken(path).ToObject<string>();
            }
            return result;
        }
        /// <summary>
        /// Json字符串首字母转大写
        /// </summary>
        /// <param name="strJsonData">json字符串</param>
        /// <returns></returns>
        public static string UpperFirst(string strJsonData)
        {
            MatchCollection matchCollection = Regex.Matches(strJsonData, "\\\"[a-zA-Z0-9]+\\\"\\s*:");
            foreach (Match item in matchCollection)
            {
                string res = Regex.Replace(item.Value, @"\b[a-z]\w+", delegate (Match match)
                {
                    string val = match.ToString();
                    return char.ToUpper(val[0]) + val.Substring(1);
                });
                strJsonData = strJsonData.Replace(item.Value, res);
            }
            return strJsonData;
        }
    }
}

Vue拦截器,拦截失败的响应,状态码为420的,中间件修改的响应的状态码:

import { AppConsts } from '/@/abpPro/AppConsts';
import { abpService } from '/@/shared/abp';
import { Modal } from 'ant-design-vue';
import axios, { AxiosResponse } from 'axios';
import abpHttpConfiguration from './abp-http-configuration.service';
const apiHttpClient = axios.create({
  baseURL: AppConsts.remoteServiceBaseUrl,
  timeout: 300000,
});
// 请求拦截器
apiHttpClient.interceptors.request.use(
  (config: any) => {
     // ....
    return config;
  },
  (error: any) => {
    return Promise.reject(error);
  },
);
// 响应拦截器
apiHttpClient.interceptors.response.use(
  (response: AxiosResponse) => {
    // 响应成功拦截器
    if (response.data.__abp) {
      response.data = response.data.result;
    }
    return response;
  },
  (error: any) => {
    // 响应失败拦截器
   	//方法里存在异步,使用一个Promise包裹起来
    return new Promise((resolve, reject) => {
      // 关闭所有模态框
      Modal.destroyAll();
      const errorResponse = error.response;
      const ajaxResponse = abpHttpConfiguration.getAbpAjaxResponseOrNull(error.response);
      if (ajaxResponse != null) {
        abpHttpConfiguration.handleAbpResponse(errorResponse, ajaxResponse);
        reject(error);
      } else {
        if (errorResponse.status == 420) {
          //abpHttpConfiguration中自己写的一个模态框弹窗,把响应数据传入其中
          abpHttpConfiguration.needIntercept(errorResponse.data)
            .toPromise()//Observable转Promise
            .then((value) => {
              if (value) {
                // resolve 原先的请求地址,重发请求
                resolve(apiHttpClient(errorResponse.config));
              } else {
                reject(error);
              }
            });
        } else {
          abpHttpConfiguration.handleNonAbpErrorResponse(errorResponse);
          reject(error);
        }
      }
    });
  },
);
export default apiHttpClient;

模态框弹窗,返回的bool类型:

//是否验证需求通过弹窗
  needIntercept(error): Observable<Boolean> {
    return new Observable<Boolean>((obs) => {
      if (error != undefined && error.SignStatus != null && !error.SignStatus) {
        //弹出模态框
        this.modalCreate(error).subscribe(
          (b) => {
            obs.next(b);
            obs.complete();
          },
          (error) => console.log(error, 123),
          () => {
            obs.next(false);
            obs.complete();
          },
        );
      } else {
        obs.next(false);
        obs.complete();
      }
    });
  }
  //电子签名弹窗
  modalCreate(responseBody: any): Observable<Boolean> {
    let sub;
    if (!responseBody.IsAccountSign) {
      //弹出模态框,指定的组件GESignNameComponent ,传入参数
      sub = modalHelper.create(
        GESignNameComponent,
        {
          relationId: responseBody.ModelSignNameId,
          listEsignRequirementId: responseBody.ListSignRequirementId,
        },
      );
    } else {
      //弹出模态框,GESignNameAccountComponent ,传入参数
      sub = modalHelper.create(
        GESignNameAccountComponent,
        {
          relationId: responseBody.ModelSignNameId,
          listEsignRequirementId: responseBody.ListSignRequirementId,
        },
      );
    }
    return sub;
  }

到此这篇关于.NET中间件与VUE拦截器联合使用详情的文章就介绍到这了,更多相关.NET VUE拦截器内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • ASP.NET Core的中间件与管道介绍

    今天来讨论一个ASP.NET Core 很重要概念管道和中间件,在ASP.NET Core中,针对HTTP请求采用pipeline也就是通常说的管道方式来处理,而管道容器内可以挂载很多中间件(处理逻辑)“串联”来处理HTTP请求,每一个中间件都有权决定是否需要执行下一个中间件,或者直接做出响应.这样的机制使得HTTP请求能够很好的被层层处理和控制,并且层次清晰处理起来甚是方便. 示意图如下: 为了再次说明管道和中间件的概念,举一个官方给出的权限验证的例子,中间件A,B分别按顺序挂载在管道容器中,

  • ASP.NET Core基础之中间件

    什么是ASP.NET Core Middleware? ASP.NET Core中间件组件是被组装到应用程序管道中以处理HTTP请求和响应的软件组件(从技术上来说,组件只是C#类). ASP.NET Core应用程序中的每个中间件组件都执行以下任务. 选择是否将 HTTP 请求传递给管道中的下一个组件.这可以通过在中间件中调用下一个 next() 方法实现. 可以在管道中的下一个组件之前和之后执行工作. 在ASP.NET Core中,已经有很多内置的中间件组件可供使用,您可以直接使用它们. 如果

  • ASP.NET Core中间件用法与官方常用中间件介绍

    目录 一.什么是中间件 中间件和过滤器的区别 二.中间件常用方法 1.Run方法 2.Use方法 3.Map方法 4.Mapwhen方法 三.自定义中间件 四.官方常用中间件 1.异常处理中间件 2.HTTPS重定向中间件 3.静态文件中间件 4.Cookie中间件 5.路由中间件 6.身份认证中间件 7.授权中间件 8.会话中间件 9.终结点路由中间件 一.什么是中间件 我们都知道,任何的一个web框架都是把http请求封装成一个管道,每一次的请求都是经过管道的一系列操作,最终才会到达我们写的

  • ASP.NET Core使用自定义日志中间件

    这个日志框架使用的是ASP.NET Core的NLog,用来记录每次请求信息和返回信息. 1.首先创建一个Web应用项目,我选择的是MVC模板: 2.使用NuGet添加Microsoft.Extensions.Logging和NLog.Extensions.Logging 3.修改Configure方法: public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFac

  • Vue.js与 ASP.NET Core 服务端渲染功能整合

    http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/ 原作者:Mihály Gyöngyösi 译者:oopsguy.com 我真的很喜欢在前端使用 Vue.js,Vue 服务端渲染直到第二个版本才被支持. 在本例中,我想展示如何将 Vue.js  服务端渲染功能整合 ASP.NET Core. 我们在服务端使用了 Microsoft.AspNetCore.SpaServices 包,该包提供 ASP.N

  • vue3.0搭配.net core实现文件上传组件

    在开发Web应用程序中,文件上传是经常用到的一个功能. 在Jquery时代,做上传功能,一般找jQuery插件就够了,很少有人去探究上传文件插件到底是怎么做的. 简单列一下我们要做的技术点和功能点 使用技术 客户端使用vue.js 3.0,并使用vue3新增的功能:Composition API ,服务器使用asp.net core 功能点 标签美化 文件预览 文件上传 服务器接收文件 文件选择美化 在标准的html文件选择标签,是十分不美观的.大概就是下图的样子 但是我们的设计师的设计图可不是

  • 如何在ASP.NET Core应用程序运行Vue并且部署在IIS上详解

    前言 从.NET Core 1.0开始我们就将其应用到项目中,但是呢我对ASP.NET Core一些原理也还未开始研究,仅限于会用,不过园子中已有大量文章存在,借着有点空余时间,我们来讲讲如何利用ASP.NET Core结合Vue在IIS上运行. ASP.NET Core结合Vue部署于IIS 关于安装Vue和Webpack则不再叙述,我们直接来创建ASP.NET Core应用程序或者通过dotnet new mvc创建ASP.NET Core应用程序 接下来在上述应用程序下通过如下命令创建Vu

  • 使用VUE+iView+.Net Core上传图片的方法示例

    我们直接进入主题,使用VS2017开发工具 首先要创建一个WebApi项目,创建完之后,在wwwroot文件下,创建一个文件夹 名字可以随意起  我这里呢就叫做Upload了 ok ! 然后我们再创建一个控制器 IndexController 代码如下 要知道上传图片都是通过HTTP去请求,服务端从request中读取 public class PicData { public string Msg { get; set; } } [HttpPost] public async Task<boo

  • .NET中间件与VUE拦截器联合使用详情

    前言: 工作中遇见的问题,边学边弄,记录一下Vue的UI库使用的是antvue 3.2.9版本的. 业务逻辑 特性: //特性 public class ModelEsignNameAttribute : Attribute { public ModelEsignNameAttribute(string nameProp, string id, string reversion = "", ModelESignType eSignType = ModelESignType.Modeli

  • Django中间件整合Vue拦截器的使用

    目录 axios拦截器是什么? 拦截器的使用 请求拦截器 响应拦截器 Django中间件token验证 中间件相关 自定义中间件 中间件的执行流程 用中间件进行登录认证 总结 axios拦截器是什么? axios拦截器可以拦截每一次的请求和响应,然后进行相应的处理.拦截器分为请求拦截器和响应拦截器,请求拦截器可以统一在你发送请求前在请求体里加上token:响应拦截器的话,是在接受到响应之后进行的一些操作,比如,服务器返回登录状态失效,需要重新登录的时候,就给它跳到登录页面: 拦截器的使用 我一般

  • vue拦截器Vue.http.interceptors.push使用详解

    刚开始学vue,github上down了一个开源项目,看源代码的时候看到了这个地方: /** * @export * @param {any} request * @param {any} next * @returns */ import store from './vuex/store' // 全局错误处理,全局loading import { setLoading, setTip } from './vuex/actions/doc_actions' export default func

  • Vue 拦截器对token过期处理方法

    最近在做的一个项目,需要每个http请求下 都要添加token,这样无疑是增加了工作量.而vue 拦截器interceptors正好可以解决我们的需求. Vue.http.interceptors.push(function (request, next) {//拦截器设置请求token // sessionStorage.getItem("tokenUrl"); request.headers.set('token', sessionStorage.getItem("tok

  • vue拦截器实现统一token,并兼容IE9验证功能

    项目中使用vue搭建前端页面,并通过axios请求后台api接口,完成数据交互.如果验证口令token写在在每次的接口中,也是个不小的体力活,而且也不灵活.这里分享使用vue自带拦截器,给每次请求的头部添加token,而且兼容了IE9. import axios from 'axios'; // 这里的config包含每次请求的内容,在这里把token放到请求头 axios.interceptors.request.use(function (config) { let token = wind

  • vue中页面跳转拦截器的实现方法

    本文主要给大家介绍的是关于vue页面跳转拦截器的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 登录拦截逻辑 第一步:路由拦截 首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录.如果用户已经登录,则顺利进入路由, 否则就进入登录页面.在路由管理页面添加meta字段 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const r

  • Vue添加请求拦截器及vue-resource 拦截器使用

    一.现象 统一处理错误及配置请求信息 二.解决 1.安装 axios  , 命令: npm install axios --save-dev 2.在根目录的config目录下新建文件 axios.js  ,内容如下: import axios from 'axios' // 配置默认的host,假如你的API host是:http://api.htmlx.club axios.defaults.baseURL = 'http://api.htmlx.club' // 添加请求拦截器 axios.

  • vue中axios解决跨域问题和拦截器的使用方法

    vue中axios不支持vue.use()方式声明使用. 所以有两种方法可以解决这点: 第一种: 在main.js中引入axios,然后将其设置为vue原型链上的属性,这样在组件中就可以直接 this.axios使用了 import axios from 'axios'; Vue.prototype.axios=axios; components: this.axios({ url:"a.xxx", method:'post', data:{ id:3, name:'jack' } }

  • vue axios登录请求拦截器

    当我们在做接口请求时,比如判断登录超时时候,通常是接口返回一个特定的错误码,那如果我们每个接口都去判断一个耗时耗力,这个时候我们可以用拦截器去进行统一的http请求拦截. 1.安装配置axios cnpm install --save axios  我们可以建一个js文件来做这个统一的处理,新建一个axios.js,如下 import axios from 'axios' import { Indicator } from 'mint-ui'; import { Toast } from 'mi

  • Vue基于vuex、axios拦截器实现loading效果及axios的安装配置

    准备 利用vue-cli脚手架创建项目 进入项目安装vuex.axios(npm install vuex,npm install axios) axios配置 项目中安装axios模块(npm install axios)完成后,进行以下配置: main.js //引入axios import Axios from 'axios' //修改原型链,全局使用axios,这样之后可在每个组件的methods中调用$axios命令完成数据请求 Vue.prototype.$axios=Axios l

随机推荐