若依框架：前端項目結(jié)構(gòu)與初始頁面渲染流程

目錄

main.js入口文件

前端頁面初始化

package.json配置文件

vue-cli：.env模式和環(huán)境變量配置

vue-cli三大核心構(gòu)件

?CLI 服務與npm scripts

vue-cli-service命令與.env模式配置文件

.env模式和環(huán)境變量配置

vue.config.js：項目啟動-自動打開默認瀏覽器的兩種配置方式??

方式1：vue-cli-service命令參數(shù)--open? ?

方式2：vue.config.js配置文件-devServer

vue.config.js配置文件與vue-cli

方式1：CommonJS模塊導出

方式2：defineConfig?幫手函數(shù)

vue-router全局導航守衛(wèi)配置

Vue-Router

Vue-Router：內(nèi)置組件

router-view組件與初始頁面渲染流程解析

vue-Router路由的配置信息

Vue-Router全局導航守衛(wèi)配置

全局前置導航守衛(wèi)的注冊/配置

全局前置導航守衛(wèi)的控制邏輯圖解

---

推薦整理分享若依框架：前端項目結(jié)構(gòu)與初始頁面渲染流程(若依框架前端如何通過后端加載頁面)，希望有所幫助，僅作參考，歡迎閱讀內(nèi)容。

文章相關熱門搜索詞:若依框架前端使用教程,若依框架前端頁面怎么設計,若依框架前端技術(shù),若依框架前端使用,若依框架前端用的什么技術(shù),若依框架前端如何通過后端加載頁面,若依框架前端框架,若依框架前端框架,內(nèi)容如對您有幫助，希望把文章鏈接給更多的朋友！

????????若依前后端環(huán)境在本地部署完畢之后，成功啟動前端Vue項目之后，會自動打開默認瀏覽器，并看到如下的初始登錄頁面，展示一個登錄表單+驗證碼圖像。

若依-前端項目初始頁面main.js入口文件

????????如果打開前端項目的main.js入口文件查看，會看到內(nèi)部做了一些Scss全局變量導入、全局樣式index.scss引入、自定義指令導入directive.js、自定義插件導入plugins.js、文件下載download等全局方法掛載、分頁組件\富文本組件\圖片上傳組件等自定義組件的全局注冊（Vue.component）、element-ui第三方UI組件庫注冊，以及Vue實例創(chuàng)建等諸多項初始化工作。?

????????這是一個比較大的話題，可能需要花費不少時間去研究這些實現(xiàn)細節(jié)。在之后的篇章中將一點點去進行剖析。

前端頁面初始化

? ? ? ? 以上談到的關于main.js中的所做的初始化工作，是比較直觀的。當然，若依的Vue前端項目也執(zhí)行了一些較為隱蔽的、不易發(fā)覺的初始化工作，這些內(nèi)容，即：后者是此刻我比較關心的、也是接下來要基于個人的粗淺理解、著重進行談論的內(nèi)容。

? ? ? ? 主要涉及的內(nèi)容包括：vue.config.js文件配置、.env模式和環(huán)境變量配置、vue-router全局導航守衛(wèi)配置、vue-router路由配置簡介。由于整個前端項目是一個比較系統(tǒng)性的工程，各部分相互穿插，因此，以上涉及的內(nèi)容可能不會特別深入到某個細節(jié)的知識點，而只是和當前篇章《前端頁面初始化》相關的內(nèi)容，至于余下的，將在之后的篇章中逐步深入。

package.json配置文件

? ? ? ? 當我拿到一個前端項目時，我會比較習慣性的先去查看整個目錄結(jié)構(gòu)，接著就是去看一看package.json配置文件，因為它至少可以告訴我們項目的環(huán)境依賴、啟動/打包/測試等相關的npm腳本命令等基礎信息。

? ? ? ? package.json文件內(nèi)容如下。當然，初次見面，我們還是優(yōu)先關注scripts節(jié)點下的內(nèi)容，

{ "name": "ruoyi", "version": "3.8.4", "description": "若依管理系統(tǒng)", "author": "若依", "license": "MIT", "scripts": { "dev": "vue-cli-service serve", "build:prod": "vue-cli-service build", "build:stage": "vue-cli-service build --mode staging", "preview": "node build/index.js --preview", "lint": "eslint --ext .js,.vue src" }, "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "src/**/*.{js,vue}": [ "eslint --fix", "git add" ] }, "keywords": [ "vue", "admin", "dashboard", "element-ui", "boilerplate", "admin-template", "management-system" ], "repository": { "type": "git", "url": "https://gitee.com/y_project/RuoYi-Vue.git" }, "dependencies": { "@riophae/vue-treeselect": "0.4.0", "axios": "0.24.0", "clipboard": "2.0.8", "core-js": "3.25.3", "echarts": "5.4.0", "element-ui": "2.15.10", "file-saver": "2.0.5", "fuse.js": "6.4.3", "highlight.js": "9.18.5", "js-beautify": "1.13.0", "js-cookie": "3.0.1", "jsencrypt": "3.0.0-rc.1", "nprogress": "0.2.0", "quill": "1.3.7", "screenfull": "5.0.2", "sortablejs": "1.10.2", "vue": "2.6.12", "vue-count-to": "1.0.13", "vue-cropper": "0.5.5", "vue-meta": "2.4.0", "vue-router": "3.4.9", "vuedraggable": "2.24.3", "vuex": "3.6.0" }, "devDependencies": { "@vue/cli-plugin-babel": "4.4.6", "@vue/cli-plugin-eslint": "4.4.6", "@vue/cli-service": "4.4.6", "babel-eslint": "10.1.0", "babel-plugin-dynamic-import-node": "2.3.3", "chalk": "4.1.0", "compression-webpack-plugin": "5.0.2", "connect": "3.6.6", "eslint": "7.15.0", "eslint-plugin-vue": "7.2.0", "lint-staged": "10.5.3", "runjs": "4.4.2", "sass": "1.32.13", "sass-loader": "10.1.1", "script-ext-html-webpack-plugin": "2.1.5", "svg-sprite-loader": "5.1.1", "vue-template-compiler": "2.6.12" }, "engines": { "node": ">=8.9", "npm": ">= 3.0.0" }, "browserslist": [ "> 1%", "last 2 versions" ]}

? ? ? ? ?從中可以了解到如下內(nèi)容，

# 項目開發(fā)環(huán)境下的啟動命令

npm run dev

# 項目生產(chǎn)環(huán)境下的打包命令

npm run build:prod

# 項目Staging 模式下的打包命令

npm run build:stage

# 項目的打包預覽命令-【即：先執(zhí)行打包命令，然后在本地開啟一個端口號，執(zhí)行項目部署操作，通過localhost主機+端口號，可以看到項目打包之后的頁面展示效果】

npm run preview

# ESlint自動修復錯誤的命令-【執(zhí)行此命令后，在執(zhí)行npm run dev啟動項目，可防止ESLint檢查報錯】

npm run lint

打包預覽命令執(zhí)行后控制臺信息打包預覽命令執(zhí)行后-頁面預覽效果vue-cli：.env模式和環(huán)境變量配置

? ? ? ? 以上，解析package.json文件，我們可以拿到項目在開發(fā)環(huán)境下的啟動命令：`npm run dev`。那么，這個腳本命令是如何做到開發(fā)環(huán)境、生產(chǎn)環(huán)境的區(qū)分呢？

? ? ? ? 這就到聊到vue-cli腳手架中.env配置文件相關的內(nèi)容了。按照傳統(tǒng)慣例，我們要先使用如下命令進行本地的全局安裝，才能進行后續(xù)的使用環(huán)節(jié)。

npm install -g @vue/cli# ORyarn global add @vue/clivue-cli三大核心構(gòu)件

? ? ? ? 先來基于我自己的理解來聊一下vue-cli吧。

CLI-命令行界面構(gòu)件

? ? ? ? vue-cli，俗稱“Vue腳手架”，通常，我們創(chuàng)建一個vue項目，很少會自己基于webpack和webpack-server去手動搭建項目框架，而是會使用如下命令獲得一個vue項目模板。

vue create project_name

? ? ? ? 其實，這個命令就是vue-cli的CLI核心構(gòu)件提供的終端里的?vue?命令，用于快速創(chuàng)建一個Vue項目模板。

vue-cli官網(wǎng)介紹

CLI服務-命令行界面服務構(gòu)件

node_modules文件夾

? ? ? ? 基于vue-cli命令創(chuàng)建的vue項目，一般都會在項目的根目錄下有一個node_modules文件夾，用來存放當前項目相關的所有依賴項或者說是第三方JavaScript開發(fā)庫。我們注意到，若依的前端項目下就有node_modules文件夾。

? ? ? ? 其實，這個文件夾下還包括了@vue/cli-service插件依賴項，這個插件就是保證package.json文件中scripts節(jié)點下一些npm run XXX命令正常運行的關鍵。我們來看一下vue-cli官網(wǎng)的介紹，

? ? ? ? ?細致看package.json中定義的一些命令，鍵值對的值，如前3個都包含vue-cli-service相關的命令，這些命令可以說都是依賴于@vue/cli-service插件才能生效的。

@vue/cli-service插件驅(qū)動的命令

?CLI插件-命令行界面插件構(gòu)件

? ? ? ? ? ?有關CLI插件，我們最常見的就是ESLint，當前還有一些其它的插件，但是無論如何，這些插件都是以@vue/cli-plugin開頭的，我們可以在package.json文件中的devDependencies節(jié)點下看到若依前端框架中涉及到的CLI插件，分別是：babel和ESLint插件。

? ? ? ? ? ?至于這些插件有什么用？插件可以修改 webpack 的內(nèi)部配置，也可以向?vue-cli-service?注入命令。

CLI插件

?CLI 服務與npm scripts

? ? ? ? 我們還是回歸到“.env模式和環(huán)境變量配置”這個核心問題上，但是，關于環(huán)境區(qū)分，我們最直觀的區(qū)分形式，是以npm scritps腳本命令的方式去進行區(qū)分的。那么，這其中的原理是什么呢？

? ? ? ? 我們還要繼續(xù)聊一聊vue-cli三大核心構(gòu)件之——CLI服務相關的內(nèi)容。

? ? ? ? 以上內(nèi)容中，我們談到，在任何Vue項目根目錄下的node_modules下，會自動安裝一個叫做“@vue/cli-service”的第三方依賴，這個依賴項提供了名為?vue-cli-service?的命令，開發(fā)者可以在 npm scripts 中以?vue-cli-service、或者從終端中以?./node_modules/.bin/vue-cli-service?訪問這個命令。

? ? ? ? ?而在執(zhí)行這個vue-cli-service命令時，還可以附加一些參數(shù)，例如：上圖中的build:satge中就包含了一個mode參數(shù)，用于區(qū)分項目中預先配置好的環(huán)境變量。

? ? ? ? 以vue-cli-service serve啟動項目的命令為例，詳細的參數(shù)信息如下，

用法：vue-cli-service serve [options] [entry]選項： --open 在服務器啟動時打開瀏覽器 --copy 在服務器啟動時將 URL 復制到剪切版 --mode 指定環(huán)境模式 (默認值：development) --host 指定 host (默認值：0.0.0.0) --port 指定 port (默認值：8080) --https 使用 https (默認值：false)

? ? ? ? 而vue-cli-service命令在執(zhí)行時，會基于內(nèi)部的webpack-dev-server，啟動一個開發(fā)服務器并附帶開箱即用的模塊熱重載 (Hot-Module-Replacement)。除了通過命令行參數(shù)，你也可以使用?vue.config.js?里的?devServer?字段配置開發(fā)服務器，當然，這是下一部分我們要討論的內(nèi)容。

? ? ? ? 再以vue-cli-service build打包項目的命令為例，詳細的參數(shù)信息如下，

用法：vue-cli-service build [options] [entry|pattern]選項： --mode 指定環(huán)境模式 (默認值：production) --dest 指定輸出目錄 (默認值：dist) --modern 面向現(xiàn)代瀏覽器帶自動回退地構(gòu)建應用 --target app | lib | wc | wc-async (默認值：app) --name 庫或 Web Components 模式下的名字 (默認值：package.json 中的 "name" 字段或入口文件名) --no-clean 在構(gòu)建項目之前不清除目標目錄的內(nèi)容 --report 生成 report.html 以幫助分析包內(nèi)容 --report-json 生成 report.json 以幫助分析包內(nèi)容 --watch 監(jiān)聽文件變化

????????vue-cli-service build?會在?dist/?目錄產(chǎn)生一個可用于生產(chǎn)環(huán)境的包，帶有 JS/CSS/HTML 的壓縮，和為更好的緩存而做的自動的 vendor chunk splitting。它的 chunk manifest 會內(nèi)聯(lián)在 HTML 里。類似于vue-cli-service serve項目啟動命令，項目打包的相關配置也可以在vue.config.js文件之中進行指定。

vue-cli-service命令與.env模式配置文件

? ? ? ? 注意到上述與項目啟動、打包相關的 vue-cli-service命令，都含有一個'--mode'參數(shù)，這個參數(shù)其實就是用來指定環(huán)境模式的，其中：vue-cli-service serve命令的--mode參數(shù)默認是開發(fā)環(huán)境，對應的值是：development，通常是在項目開發(fā)過程中使用的；當然，也還有生產(chǎn)環(huán)境production，通常是在項目打包/線上環(huán)境使用的。

? ? ? ? 具體的使用，例如：

? ? ? ? ?上圖的命令，默認等價于，

? "scripts": {? ? "dev": "vue-cli-service serve --mode development",? ? "build:prod": "vue-cli-service build --mode production",? ? "build:stage": "vue-cli-service build --mode staging",? ? "preview": "node build/index.js --preview",? ? "lint": "eslint --ext .js,.vue src"? },.env模式和環(huán)境變量配置

?????????進一步思考，這里的production、development是如何生效的呢？其實，仔細觀察，會發(fā)現(xiàn)，若依前端項目根目錄下，還包含了三個以.env開頭的文件，例如：.env.development、.env.production、.env.staging，而上述命令中的--mode參數(shù)后面的值，就是與文件名中.env.xxx中的xxx部分相對應的，例如：執(zhí)行npm run dev，以vue-cli-service serve --mode development命令啟動項目時，在項目中的任何地方，待用process.env去查詢環(huán)境變量時，匹配的就是.env.development文件中定義的信息。

?????????例如，.env.development開發(fā)環(huán)境變量配置文件中定義的信息如下，那么在開發(fā)環(huán)境下，就可以通過process.env.VUE_APP_TITLE的方式，拿到頁面標題的內(nèi)容，其它的以此類推。

# 頁面標題VUE_APP_TITLE = 若依管理系統(tǒng)# 開發(fā)環(huán)境配置ENV = 'development'# 若依管理系統(tǒng)/開發(fā)環(huán)境VUE_APP_BASE_API = '/dev-api'# 路由懶加載VUE_CLI_BABEL_TRANSPILE_MODULES = true

? ? ? ? .env文件中的信息稱之為“環(huán)境變量”，通常地，配置一個.env.xxx文件的操作，也叫作：配置環(huán)境變量。但是，環(huán)境變量的名稱定義并不是隨意可寫的，而是要遵循一定的規(guī)范。如下圖所示，

? ? ? ? ?但是，請注意：不要在你的應用程序中存儲任何機密信息（例如私有 API 密鑰）！環(huán)境變量會隨著構(gòu)建打包嵌入到輸出代碼，意味著任何人都有機會能夠看到它。

????????請注意，只有?NODE_ENV，BASE_URL?和以?VUE_APP_?開頭的變量將通過?webpack.DefinePlugin?靜態(tài)地嵌入到客戶端側(cè)的代碼中。這意味著，只有遵循此規(guī)范的環(huán)境變量在一個Vue前端應用中才能生效。

補充：環(huán)境文件加載優(yōu)先級vue.config.js：項目啟動-自動打開默認瀏覽器的兩種配置方式??

?????????接下來，我們終于可以執(zhí)行'npm run dev'命令，間接驅(qū)動“vue-cli-service serve --mode development”命令，來啟動若依前端項目了。

? ? ? ? 等待若干秒時長，項目被啟動，并自動打開如下頁面。

若依前端-起始頁

? ? ? ? ?此刻我們當然應該高興，因為這意味著若依的前后端項目我們至少已經(jīng)在本地初步地部署成功了。但是，隨之而來的是困惑：Vue項目是如何做到項目啟動成功之后，自動打開默認瀏覽器，展示初始頁面的呢？

方式1：vue-cli-service命令參數(shù)--open? ?

? ? ? ? 還記得之前，我們在討論vue-cli-service serve命令時，它包含著一個open參數(shù)嗎？

vue-cli-service serve

? ? ? ? ?好的，兄弟，我們來配置一下試一試，如下圖所示，經(jīng)過實際驗證，是可以生效的。

方式2：vue.config.js配置文件-devServer

? ? ? ? 另一點內(nèi)容，我們在談論?vue-cli-service serve命令時，也提到，它的配置參數(shù)，也可以在vue.config.js配置文件中，對devServer字段進行配置，也是可行的。

? ? ? ?當然，若依前端項目默認就是這樣配置的。

vue.config.js配置文件與vue-cli

? ? ? ? ?此刻，相比深入了解vue.config.js的具體配置項，我想你一定更想了解，這里的vue.config.js配置文件是如何生效的？

? ? ? ? 如果你了解過Java后端框架SpringBoot，那么，可以清晰地認定：項目啟動時，會自動去加載resources目錄下的application.yml配置文件。一樣的道理，vue.config.js配置文件就是Vue前端項目的配置文件，在項目啟動時會自動被加載、解析。

? ? ? ? 那么，它是如何生效的呢？還記得@vue/cli-service依賴項嗎，這個項目根目錄下的vue.config.js配置文件，在啟動時，就是被@vue/cli-service依賴項自動加載的。當然，也可以在package.json文件中，新建一個vue結(jié)點，進行同類型的配置。但是，通常的我們更推薦在vue.config.js文件中進行配置。

vue.config.js配置文件加載原理

? ? ? ? 那么，標準的vue.config.js配置文件該如何書寫呢？

? ? ? ? 一般有兩種書寫方式，

方式1：CommonJS模塊導出

? ? ? ? 示例文件內(nèi)容如下，

// vue.config.js/** * @type {import('@vue/cli-service').ProjectOptions} */module.exports = { // 選項...}方式2：defineConfig?幫手函數(shù)

???????? 示例文件內(nèi)容如下，

// vue.config.jsconst { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({ // 選項})

? ? ? ? 詳細的配置項，可以查看Vue-cli官網(wǎng)-配置參考。

vue-router全局導航守衛(wèi)配置

? ? ? ? 基本了解Vue項目的package.json、.env模式和環(huán)境變量區(qū)分、vue.config.js配置文件、vue-cli與項目基本啟動/打包/規(guī)范化命令等內(nèi)容之后，新的問題來了：若依的Vue前端項目啟動之后，為什么是下面這個登錄頁面，這個路由控制是如何實現(xiàn)的呢？

起始頁

? ? ? ? 結(jié)合若依的前端項目框架，這就要談到Vue-Router路由控制相關、全局導航守衛(wèi)相關的內(nèi)容了?。

Vue-Router

? ? ? ? Vue-Router的介紹，借用Vue Router官網(wǎng)的截圖，總結(jié)為一句話就是：Vue Router為Vue前端項目提供了路由配置、路由跳轉(zhuǎn)/導航控制相關的功能。

什么是Vue-Router?

? ? ? ? ?如果你了解過后端項目的開發(fā)流程，那么這里的Vue Router，也可以理解為類似于Java后端Controller控制器的頁面重定向、請求攔截等一類操作。

? ? ? ? Vue-Router官方網(wǎng)站提供了如下兩種安裝Vue Router依賴庫的方式，

# npm安裝命令npm install vue-router@4# yarn安裝命令yarn add vue-router@4Vue-Router：內(nèi)置組件

? ? ? ? Vue-Router提供了兩個強大的內(nèi)置組件：<router-link/>、<router-view/>，其中：

? ? ? ? ①<router-link/>：類似于HTML中的<a></a>標簽，但是，相比a標簽，<router-link/>可以不重新加載頁面的情況下更改 URL，處理 URL 的生成以及編碼。

? ? ? ? ②<router-view/>：router-view?將顯示與 url 對應的組件。你可以把它放在任何地方，以適應你的布局。

router-view組件與初始頁面渲染流程解析

? ? ? ? 我們可以查看若依前端項目中App.vue組件，在<template></template>內(nèi)部，就包含了<router-view/>組件，

<template> <div id="app"> <router-view /> <theme-picker /> </div></template>

? ? ? ? 這里的<router-view/>組件就是用于顯示默認路由"/"或者""對應的組件的，我們可以通過vue-devTools開發(fā)工具查看頁面組件的組織結(jié)構(gòu)，注意到：在id為app的組件根節(jié)點下，<App/>父組件下的<router-viewer/>組件對應的就是Login.vue登錄頁面組件，因此，在執(zhí)行npm run dev（vue-cli-service serve --mode development）項目啟動之后，通過@vue/cli-service加載vue.config.js文件，解析到devServer.open=true，自動打開瀏覽器；然后通過路由匹配，將<App/>組價內(nèi)部的<router-view/>組件替換為默認路由對應的Login.vue登錄組件。

vue-Router路由的配置信息

? ? ? ? 接下來，我們可能會疑惑，這里的vue-Router路由的配置信息在哪里呢？或者說，Vue-Router的配置信息是如何生效的呢？

? ? ? ? 通常地，Vue項目在創(chuàng)建之后，如果選擇了vue-Router依賴項，那么，就會自動在項目根目錄下創(chuàng)建一個router文件夾，里面包含了一個index.js文件，這個index.js文件，就是用來對Vue-Router的路由規(guī)則進行配置的。

? ? ? ? 我們查看若依前端項目的這個文件，會發(fā)現(xiàn)最終該文件基于ES6的export的語法規(guī)則，導出了一個Router對象，而這個Router類是預先調(diào)用Vue.use()方法注冊完成的。

import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)...export default new Router({ mode: 'history', // 去掉url中的# scrollBehavior: () => ({ y: 0 }), routes: constantRoutes})

? ? ? ? 注意到，這里的Router的routes參數(shù)就是關鍵，該參數(shù)的內(nèi)容如下，

// 公共路由export const constantRoutes = [ { path: '/redirect', component: Layout, hidden: true, children: [ { path: '/redirect/:path(.*)', component: () => import('@/views/redirect') } ] }, { path: '/login', component: () => import('@/views/login'), hidden: true }, { path: '/register', component: () => import('@/views/register'), hidden: true }, { path: '/404', component: () => import('@/views/error/404'), hidden: true }, { path: '/401', component: () => import('@/views/error/401'), hidden: true }, { path: '', component: Layout, redirect: 'index', children: [ { path: 'index', component: () => import('@/views/index'), name: 'Index', meta: { title: '首頁', icon: 'dashboard', affix: true } } ] }, { path: '/user', component: Layout, hidden: true, redirect: 'noredirect', children: [ { path: 'profile', component: () => import('@/views/system/user/profile/index'), name: 'Profile', meta: { title: '個人中心', icon: 'user' } } ] }]

? ? ? ? 仔細觀察，我們找到了默認路由路徑""對應的組件，竟然是：Index.vue主頁組件，但是，實際上顯示的是Login.vue登錄組件，這又是如何實現(xiàn)的呢？

Vue-Router全局導航守衛(wèi)配置

? ? ? ? ?我們講到：默認路由路徑""對應的組件，竟然是：Index.vue主頁組件，但是，實際上顯示的是Login.vue登錄組件，這種邏輯其實是通過Vue-Router的全局導航守衛(wèi)實現(xiàn)的。

? ? ? ? 全局導航守衛(wèi)，就類似于Java后端的Filter過濾器，例如：在用戶還未登陸時，可以將一些未攜帶Token信息的HTTP請求在請求鏈中提前過濾掉，實現(xiàn)某種主頁訪問的權(quán)限控制。

標題

? ? ? ? 這里基于Vue-Router的全局導航守衛(wèi)，是一樣的實現(xiàn)思路。由于全局導航守衛(wèi)在任意的導航路由被觸發(fā)時，都會先去執(zhí)行導航守衛(wèi)中預定義的邏輯，因此，也可以實現(xiàn)類似于后端基于過濾器的首頁訪問控制的效果。

全局前置導航守衛(wèi)的注冊/配置

????????可以使用?router.beforeEach?注冊一個全局前置守衛(wèi)：

const router = createRouter({ ... })router.beforeEach((to, from) => { // ... // 返回 false 以取消導航 return false})

? ? ? ? 至于若依前端項目中的全局導航守衛(wèi)配置，是在項目根目錄下的permission.js文件中實現(xiàn)的，具體代碼如下，

import router from './router'import store from './store'import { Message } from 'element-ui'import NProgress from 'nprogress'import 'nprogress/nprogress.css'import { getToken } from '@/utils/auth'import { isRelogin } from '@/utils/request'NProgress.configure({ showSpinner: false })//路由白名單-用戶未登錄時可以隨意訪問的路由const whiteList = ['/login', '/auth-redirect', '/bind', '/register']/** * 全局前置守衛(wèi)-router.beforeEach * 判斷用戶是否有權(quán)限進入主頁-獲取存儲在Cookie中的token值 * 有token-進入主頁 * 無token-進入登錄頁重新登錄 */router.beforeEach((to, from, next) => { console.log(to) console.log(from) console.log(next) debugger; NProgress.start() //從Cookie中獲取Token-判斷用戶是否已經(jīng)登錄 if (getToken()) { //如果已經(jīng)登錄 to.meta.title && store.dispatch('settings/setTitle', to.meta.title) /* has token*/ if (to.path === '/login') { next({ path: '/' }) NProgress.done() } else { if (store.getters.roles.length === 0) { isRelogin.show = true // 判斷當前用戶是否已拉取完user_info信息 store.dispatch('GetInfo').then(() => { isRelogin.show = false store.dispatch('GenerateRoutes').then(accessRoutes => { // 根據(jù)roles權(quán)限生成可訪問的路由表 router.addRoutes(accessRoutes) // 動態(tài)添加可訪問路由表 next({ ...to, replace: true }) // hack方法 確保addRoutes已完成 }) }).catch(err => { store.dispatch('LogOut').then(() => { Message.error(err) next({ path: '/' }) }) }) } else { next() } } } else { // 沒有token-用戶未登錄 if (whiteList.indexOf(to.path) !== -1) { // 如果在免登錄白名單，直接進入目標路由對應的頁面 next() } else { //如果不在登錄白名單中時，自動跳轉(zhuǎn)到Login登錄組件進行登錄 next(`/login?redirect=${to.fullPath}`) // 否則全部重定向到登錄頁 NProgress.done() } }})//全局后置鉤子-不會接受 next 函數(shù)也不會改變導航本身router.afterEach(() => { NProgress.done()})全局前置導航守衛(wèi)的控制邏輯圖解

? ? ? ? 下圖為全局前置導航守衛(wèi)的作用機制，

? ? ? ? PS：有關獲取Token成功之后，進行路由表動態(tài)生成的邏輯，在之后的篇章中再進行梳理。

若依前端項目-頁面初始化時-前置導航守衛(wèi)實現(xiàn)邏輯

? ? ? ? ?在下一篇章中，將介紹Login.vue登錄組件的初始化流程以及驗證碼圖片的實現(xiàn)邏輯。