位置: IT常識 - 正文
目錄
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)邏輯。
上一篇:黃石國家公園的美洲野牛,美國懷俄明州 (? Steve Gettle/Minden Pictures)(黃石國家公園的占地面積)
下一篇:鑲嵌在巨石之間的石屋,葡萄牙 (? Olimpio Fantuz/eStock Photo)(鑲嵌在巨石之間的英文)
網(wǎng)站地圖: 企業(yè)信息 工商信息 財稅知識 網(wǎng)絡常識 編程技術(shù)
友情鏈接: 武漢網(wǎng)站建設