（系列十一）Vue3框架中路由守卫及请求拦截（实现前后端交互）

import { createRouter, createWebHashHistory, NavigationGuardNext, RouteLocationNormalized } from 'vue-router' import { routes } from './module/base-routes' import NProgress from 'nprogress' import 'nprogress/nprogress.css'  NProgress.configure({ showSpinner: false })  const router = createRouter({   history: createWebHashHistory(), //开发环境   routes })  /** 路由守卫，访问路由菜单前拦截  * @param to 目标  * @param from 来至   */ router.beforeEach((to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {   NProgress.start();  if (to.meta.requireAuth) {     next();   } else if (to.matched.length == 0) {     next({ path: '/panel' })   } else {     next();   } })  router.afterEach(() => {   NProgress.done(); })  export default router

//创建路由，并且暴露出去 const router = createRouter({   history: createWebHashHistory(), //开发环境   //history:createWebHistory(), //正式环境   routes }) export default router

import axios, { AxiosResponse, InternalAxiosRequestConfig } from 'axios';  //声明模型参数 type TAxiosOption = {     timeout: number;     baseURL: string; }  //配置赋值 const config: TAxiosOption = {     timeout: 5000,     baseURL: "https://localhost:44327/",    // 本地api接口地址 }  class Http {     service;     constructor(config: TAxiosOption) {         this.service = axios.create(config)          /* 请求拦截 */         this.service.interceptors.request.use((config: InternalAxiosRequestConfig) => {             //可以在这里做请求拦截处理   如：请求接口前，需要传入的token             debugger;             return config         }, (error: any) => {             return Promise.reject(error);         })          /* 响应拦截 */         this.service.interceptors.response.use((response: AxiosResponse<any>) => {             debugger;             switch (response.data.code) {                 case 200:                     return response.data;                 case 500:                     //这里面可以写错误提示，反馈给前端                     return response.data;                 case 99991:                     return response.data;                 case 99992:                     return response.data;                 case 99998:                     return response.data;                 default:                     break;             }         }, (error: any) => {             return Promise.reject(error)         })     }      /* GET 方法 */     get<T>(url: string, params?: object, _object = {}): Promise<any> {         return this.service.get(url, { params, ..._object })     }     /* POST 方法 */     post<T>(url: string, params?: object, _object = {}): Promise<any> {         return this.service.post(url, params, _object)     }     /* PUT 方法 */     put<T>(url: string, params?: object, _object = {}): Promise<any> {         return this.service.put(url, params, _object)     }     /* DELETE 方法 */     delete<T>(url: string, params?: any, _object = {}): Promise<any> {         return this.service.delete(url, { params, ..._object })     } }  export default new Http(config)

import Http from '../http';  export const TestAutofac = function () {     return Http.get('/api/SysUser/TestAutofac'); }

<template>   <div>用户</div> </template>  <script lang="ts"> import { defineComponent, onMounted } from "vue"; import { TestAutofac } from "../../api/module/user"; export default defineComponent({   setup() {      //初始加载     onMounted(() => {         TestAutofacMsg();     });          //调用接口     const TestAutofacMsg = async () => {       var result = await TestAutofac();       console.log(result);     };     return {};   },   components: {}, }); </script>

 /// <summary>  /// 跨域配置插件  /// </summary>  public static class CrossDomainPlugIn  {      /// <summary>      /// 跨域      /// </summary>      /// <param name="services"></param>      public static void InitCors(this IServiceCollection services)      {          //允许一个或多个来源可以跨域          services.AddCors(options =>          {              options.AddPolicy("Access-Control-Allow-Origin", policy =>              {                  var result = AppSettingsPlugIn.GetNode("CustomCorsPolicy:WhiteList").Split(',');                  // 设定允许跨域的来源，有多个可以用','隔开                  policy.WithOrigins(result)                  .AllowAnyHeader()                  .AllowAnyMethod()                  .AllowCredentials();              });          });      }  }