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

import { createRouter, createWebHashHistory, NavigationGuardNext, RouteLocationNormalized } from 'vue-router'import { routes }from './module/base-routes'import NProgressfrom '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();

})



exportdefault router

//创建路由，并且暴露出去
const router =createRouter({

  history: createWebHashHistory(),//开发环境//history:createWebHistory(),//正式环境
routes

})

exportdefault router

import axios, { AxiosResponse, InternalAxiosRequestConfig } from 'axios';//声明模型参数
type TAxiosOption ={

    timeout: number;

    baseURL:string;

}//配置赋值
const config: TAxiosOption ={

    timeout:5000,

    baseURL:"https://localhost:44327/",    //本地api接口地址
}classHttp {

    service;

    constructor(config: TAxiosOption) {this.service =axios.create(config)/*请求拦截*/
        this.service.interceptors.request.use((config: InternalAxiosRequestConfig) =>{//可以在这里做请求拦截处理   如：请求接口前，需要传入的token
debugger;returnconfig

        }, (error: any)=>{returnPromise.reject(error);

        })/*响应拦截*/
        this.service.interceptors.response.use((response: AxiosResponse<any>) =>{

            debugger;switch(response.data.code) {case 200:returnresponse.data;case 500://这里面可以写错误提示，反馈给前端
                    returnresponse.data;case 99991:returnresponse.data;case 99992:returnresponse.data;case 99998:returnresponse.data;default:break;

            }

        }, (error: any)=>{returnPromise.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 })

    }

}



exportdefault new Http(config)

import Http from '../http';



exportconst 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";

exportdefaultdefineComponent({

  setup() {//初始加载
    onMounted(() =>{

        TestAutofacMsg();

    });//调用接口
    const TestAutofacMsg = async () =>{var result = awaitTestAutofac();

      console.log(result);

    };return{};

  },

  components: {},

});</script>

 /// <summary>
 ///跨域配置插件/// </summary>
 public static classCrossDomainPlugIn

 {/// <summary>
     ///跨域/// </summary>
     /// <param name="services"></param>
     public static void InitCors(thisIServiceCollection services)

     {//允许一个或多个来源可以跨域
         services.AddCors(options =>{

             options.AddPolicy("Access-Control-Allow-Origin", policy =>{var result = AppSettingsPlugIn.GetNode("CustomCorsPolicy:WhiteList").Split(',');//设定允许跨域的来源，有多个可以用','隔开
policy.WithOrigins(result)

                 .AllowAnyHeader()

                 .AllowAnyMethod()

                 .AllowCredentials();

             });

         });

     }

 }