說明
該文章是屬於OverallAuth2.0系列文章，每週更新一篇該系列文章（從0到1完成系統開發）。
該系統文章，我會盡量說的非常詳細，做到不管新手、老手都能看懂。
說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+視覺化流程管理系統。
友情提醒：本篇文章是屬於系列文章，看該文章前，建議先看之前文章，可以更好理解專案結構。
qq群：801913255
有興趣的朋友，請關注我吧(*^▽^*)。
關注我，學不會你來打我
前言
這篇文章有點長，內容豐富，如果你對該文章感興趣，請耐心觀看。
一、什麼是路由守衛，它的作用是什麼
什麼是路由守衛：它是控制路由選單訪問的一種機制，當一個使用者點選一個路由選單時，那麼路由守衛就會對其進行“保護”，常見的守衛方式有
beforeEach：路由選單訪問前守衛。
afterEach：路由選單訪問後守衛。
路由守衛的作用：瞭解什麼是路由守衛後，其實我們大致可以得出它大致有以下作用。
1、身份認證：在進入模組之前，驗證使用者身份是否正確，列如：登入是否過期，使用者是否登入等。
2、許可權控制：控制使用者、角色對應模組的訪問許可權。
3、日誌記錄：由於路由守衛能監控到使用者對於模組訪問前和訪問後的動作，那麼我們可以用來記錄使用者的訪問日誌等。
4、資料預載入：在很多時候，些許資料需要在我們訪問頁面前，載入完成。
5、路由動畫：可以在路由訪問前後，載入一個過渡動畫，提高使用者體驗。
二、路由守衛的使用
在使用之前，我們需要安裝狀態管理庫和狀態持久化外掛以及路由載入進度條。它可以共享程式中的一些狀態。
1：安裝npm install pinia 狀態儲存庫
2：安裝npm install pinia-plugin-persistedstate 狀態持久化外掛
3：安裝 npm install nprogress 進度條外掛
4：安裝 npm install @types/nprogress
書接上一篇：Vue3中選單和路由的結合使用，實現選單的動態切換
建立一個路由檔案index.ts，存放在指定資料夾下，由於我寫的是從0到1搭建框架，我放在了以下目錄中
內容如下：
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
程式碼解釋：
然後我們在main中，全域性註冊路由和狀態管理
做好以上這些，路由守衛就完成。
如果，你是按照我的系列文章所搭建的前端框架，那麼你要在以下2個檔案中，做出改動（沒有，請忽略）。
1、在HelloWorld.vue檔案中把import router, { routes } from "../router/module/base-routes";替換成import { routes } from "../router/module/base-routes"; 並加入import router from "../router/index";
2、在base-routes.ts檔案中刪除以下程式碼
//建立路由，並且暴露出去 const router = createRouter({ history: createWebHashHistory(), //開發環境 //history:createWebHistory(), //正式環境 routes }) export default router
做好這些，我們啟動專案，檢查每次點選路由選單，是否進入路由守護攔截中。
明白的夥伴，請抓緊去填充你的內容吧。
三、請求攔截、響應攔截
我們OverallAuth2.0使用的是Vue3+.net8 WebApi建立的專案，所以我們會使用到後端介面。那麼我們前端該如何和後端建立資料互動關係？建立關係會該如何處理返回資訊？不要著急，耐心往下看。
首先要安裝組合式api請求外掛axios
安裝命令：npm install axios
然後按照下圖，新建檔案及資料夾
http.ts檔案內容如下
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)
以上程式碼關鍵點都有註釋說明
user.ts中的內容如下
import Http from '../http'; export const TestAutofac = function () { return Http.get('/api/SysUser/TestAutofac'); }
這個就是我們之前搭建後端框架，演示示例的介面地址。
做完以上工作，整個響應攔截和請求攔截的基本程式碼編寫完成，接下來就是測試。
四、測試
在使用者介面新增以下程式碼（也可以新建vue頁面）
<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>
點選使用者選單，測試請求攔截是否成功
攔截成功，但出現如下錯誤（跨域問題）
上面問題是跨域問題導致，我們要在介面端配置跨域地址。
開啟之前我們的後端框架，建立如下檔案CrossDomainPlugIn.cs，路徑和jwt鑑權，全域性異常捕獲外掛放在同一個位置。
/// <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(); }); }); } }
然後再Program.cs檔案中，新增
//跨域配置
builder.Services.InitCors();和app.UseCors("Access-Control-Allow-Origin");程式碼
appsettings.json配置中新增如下配置，地址是前端訪問地址
/*跨越設定*/
"AllowedHosts": "*",
"CustomCorsPolicy": {
"WhiteList": "http://localhost:8080"
},
啟動後端介面，在測試下
以上就是本篇文章的全部內容，感謝耐心觀看
後端WebApi 預覽地址：http://139.155.137.144:8880/swagger/index.html
前端vue 預覽地址：http://139.155.137.144:8881
關注公眾號：傳送【許可權】，獲取前後端程式碼
有興趣的朋友，請關注我微信公眾號吧(*^▽^*)。
關注我：一個全棧多端的寶藏博主，定時分享技術文章，不定時分享開源專案。關注我，帶你認識不一樣的程式世界