Vue 項目一些常見問題的解決方案
1. 頁面權(quán)限控制和登陸驗證
頁面權(quán)限控制
頁面權(quán)限控制是什么意思呢？
就是一個網(wǎng)站有不同的角色，比如管理員和普通用戶，要求不同的角色能訪問的頁面是不一樣的。如果一個頁面，有角色越權(quán)訪問，這時就得做出限制了。
一種方法是通過動態(tài)添加路由和菜單來做控制，不能訪問的頁面不添加到路由表里，這是其中一種辦法。具體細節(jié)請看下一節(jié)的《動態(tài)菜單》。
另一種辦法就是所有的頁面都在路由表里，只是在訪問的時候要判斷一下角色權(quán)限。如果有權(quán)限就允許訪問，沒有權(quán)限就拒絕，跳轉(zhuǎn)到 404 頁面。
思路
在每一個路由的 meta 屬性里，將能訪問該路由的角色添加到 roles 里。用戶每次登陸后，將用戶的角色返回。然后在訪問頁面時，把路由的 meta 屬性和用戶的角色進行對比，如果用戶的角色在路由的 roles 里，那就是能訪問，如果不在就拒絕訪問。
代碼示例
路由信息
routes:?[
????{
????????path:?'/login',
????????name:?'login',
????????meta:?{
????????????roles:?['admin',?'user']
????????},
????????component:?()?=>?import('../components/Login.vue')
????},
????{
????????path:?'home',
????????name:?'home',
????????meta:?{
????????????roles:?['admin']
????????},
????????component:?()?=>?import('../views/Home.vue')
????},
]
頁面控制
//?假設(shè)角色有兩種：admin 和 user
//?這里是從后臺獲取的用戶角色
const?role?=?'user'
//?在進入一個頁面前會觸發(fā)?router.beforeEach?事件
router.beforeEach((to,?from,?next)?=>?{
????if?(to.meta.roles.includes(role))?{
????????next()
????}?else?{
????????next({path:?'/404'})
????}
})
登陸驗證
網(wǎng)站一般只要登陸過一次后，接下來該網(wǎng)站的其他頁面都是可以直接訪問的，不用再次登陸。我們可以通過 token 或 cookie 來實現(xiàn)，下面用代碼來展示一下如何用 token 控制登陸驗證。
router.beforeEach((to,?from,?next)?=>?{
????//?如果有token?說明該用戶已登陸
????if?(localStorage.getItem('token'))?{
????????//?在已登陸的情況下訪問登陸頁會重定向到首頁
????????if?(to.path?===?'/login')?{
????????????next({path:?'/'})
????????}?else?{
????????????next({path:?to.path?||?'/'})
????????}
????}?else?{
????????//?沒有登陸則訪問任何頁面都重定向到登陸頁
????????if?(to.path?===?'/login')?{
????????????next()
????????}?else?{
????????????next(`/login?redirect=${to.path}`)
????????}
????}
})
2. 動態(tài)菜單
寫后臺管理系統(tǒng)，估計有不少人遇過這樣的需求：根據(jù)后臺數(shù)據(jù)動態(tài)添加路由和菜單。為什么這么做呢？因為不同的用戶有不同的權(quán)限，能訪問的頁面是不一樣的。
動態(tài)添加路由
利用 vue-router 的 addRoutes 方法可以動態(tài)添加路由。
先看一下官方介紹：
router.addRoutes
router.addRoutes(routes:?Array)
動態(tài)添加更多的路由規(guī)則。參數(shù)必須是一個符合 routes 選項要求的數(shù)組。
舉個例子：
const?router?=?new?Router({
????routes:?[
????????{
????????????path:?'/login',
????????????name:?'login',
????????????component:?()?=>?import('../components/Login.vue')
????????},
????????{path:?'/',?redirect:?'/home'},
????]???
})
上面的代碼和下面的代碼效果是一樣的
const?router?=?new?Router({
????routes:?[
????????{path:?'/',?redirect:?'/home'},
????]???
})
router.addRoutes([
????{
????????path:?'/login',
????????name:?'login',
????????component:?()?=>?import('../components/Login.vue')
????}
])
在動態(tài)添加路由的過程中，如果有 404 頁面，一定要放在最后添加，否則在登陸的時候添加完頁面會重定向到 404 頁面。
類似于這樣，這種規(guī)則一定要最后添加。
{path:?'*',?redirect:?'/404'}
動態(tài)生成菜單
假設(shè)后臺返回來的數(shù)據(jù)長這樣：
//?左側(cè)菜單欄數(shù)據(jù)
menuItems:?[
????{
????????name:?'home',?//?要跳轉(zhuǎn)的路由名稱?不是路徑
????????size:?18,?//?icon大小
????????type:?'md-home',?//?icon類型
????????text:?'主頁'?//?文本內(nèi)容
????},
????{
????????text:?'二級菜單',
????????type:?'ios-paper',
????????children:?[
????????????{
????????????????type:?'ios-grid',
????????????????name:?'t1',
????????????????text:?'表格'
????????????},
????????????{
????????????????text:?'三級菜單',
????????????????type:?'ios-paper',
????????????????children:?[
????????????????????{
????????????????????????type:?'ios-notifications-outline',
????????????????????????name:?'msg',
????????????????????????text:?'查看消息'
????????????????????},
????????????????]
????????????}
????????]
????}
]
來看看怎么將它轉(zhuǎn)化為菜單欄，我在這里使用了 iview 的組件，不用重復(fù)造輪子。
<Menu?ref="asideMenu"?theme="dark"?width="100%"?@on-select="gotoPage"?
accordion?:open-names="openMenus"?:active-name="currentPage"?@on-open-change="menuChange">
????
????<div?v-for="(item,?index)?in?menuItems"?:key="index">
????????<Submenu?v-if="item.children"?:name="index">
????????????<template?slot="title">
????????????????<Icon?:size="item.size"?:type="item.type"/>
????????????????<span?v-show="isShowAsideTitle">{{item.text}}span>
????????????template>
????????????<div?v-for="(subItem,?i)?in?item.children"?:key="index?+?i">
????????????????<Submenu?v-if="subItem.children"?:name="index?+?'-'?+?i">
????????????????????<template?slot="title">
????????????????????????<Icon?:size="subItem.size"?:type="subItem.type"/>
????????????????????????<span?v-show="isShowAsideTitle">{{subItem.text}}span>
????????????????????template>
????????????????????<MenuItem?class="menu-level-3"?v-for="(threeItem,?k)?in?subItem.children"?:name="threeItem.name"?:key="index?+?i?+?k">
????????????????????????<Icon?:size="threeItem.size"?:type="threeItem.type"/>
????????????????????????<span?v-show="isShowAsideTitle">{{threeItem.text}}span>
????????????????????MenuItem>
????????????????Submenu>
????????????????<MenuItem?v-else?v-show="isShowAsideTitle"?:name="subItem.name">
????????????????????<Icon?:size="subItem.size"?:type="subItem.type"/>
????????????????????<span?v-show="isShowAsideTitle">{{subItem.text}}span>
????????????????MenuItem>
????????????div>
????????Submenu>
????????<MenuItem?v-else?:name="item.name">
????????????<Icon?:size="item.size"?:type="item.type"?/>
????????????<span?v-show="isShowAsideTitle">{{item.text}}span>
????????MenuItem>
????div>
Menu>
代碼不用看得太仔細，理解原理即可，其實就是通過三次 v-for 不停的對子數(shù)組進行循環(huán)，生成三級菜單。
不過這個動態(tài)菜單有缺陷，就是只支持三級菜單。一個更好的做法是把生成菜單的過程封裝成組件，然后遞歸調(diào)用，這樣就能支持無限級的菜單。在生菜菜單時，需要判斷一下是否還有子菜單，如果有就遞歸調(diào)用組件。
動態(tài)路由因為上面已經(jīng)說過了用 addRoutes 來實現(xiàn)，現(xiàn)在看看具體怎么做。
首先，要把項目所有的頁面路由都列出來，再用后臺返回來的數(shù)據(jù)動態(tài)匹配，能匹配上的就把路由加上，不能匹配上的就不加。最后把這個新生成的路由數(shù)據(jù)用 addRoutes 添加到路由表里。
const?asyncRoutes?=?{
????'home':?{
????????path:?'home',
????????name:?'home',
????????component:?()?=>?import('../views/Home.vue')
????},
????'t1':?{
????????path:?'t1',
????????name:?'t1',
????????component:?()?=>?import('../views/T1.vue')
????},
????'password':?{
????????path:?'password',
????????name:?'password',
????????component:?()?=>?import('../views/Password.vue')
????},
????'msg':?{
????????path:?'msg',
????????name:?'msg',
????????component:?()?=>?import('../views/Msg.vue')
????},
????'userinfo':?{
????????path:?'userinfo',
????????name:?'userinfo',
????????component:?()?=>?import('../views/UserInfo.vue')
????}
}
//?傳入后臺數(shù)據(jù)?生成路由表
menusToRoutes(menusData)
//?將菜單信息轉(zhuǎn)成對應(yīng)的路由信息?動態(tài)添加
function?menusToRoutes(data)?{
????const?result?=?[]
????const?children?=?[]
????result.push({
????????path:?'/',
????????component:?()?=>?import('../components/Index.vue'),
????????children,
????})
????data.forEach(item?=>?{
????????generateRoutes(children,?item)
????})
????children.push({
????????path:?'error',
????????name:?'error',
????????component:?()?=>?import('../components/Error.vue')
????})
????//?最后添加404頁面?否則會在登陸成功后跳到404頁面
????result.push(
????????{path:?'*',?redirect:?'/error'},
????)
????return?result
}
function?generateRoutes(children,?item)?{
????if?(item.name)?{
????????children.push(asyncRoutes[item.name])
????}?else?if?(item.children)?{
????????item.children.forEach(e?=>?{
????????????generateRoutes(children,?e)
????????})
????}
}
動態(tài)菜單的代碼實現(xiàn)放在 github 上，分別放在這個項目的 src/components/Index.vue、src/permission.js 和 src/utils/index.js 文件里。
3. 前進刷新后退不刷新
需求一：
在一個列表頁中，第一次進入的時候，請求獲取數(shù)據(jù)。
點擊某個列表項，跳到詳情頁，再從詳情頁后退回到列表頁時，不刷新。
也就是說從其他頁面進到列表頁，需要刷新獲取數(shù)據(jù)，從詳情頁返回到列表頁時不要刷新。
解決方案
在 App.vue設(shè)置：
????????<keep-alive?include="list">
????????????<router-view/>
????????keep-alive>
假設(shè)列表頁為 list.vue，詳情頁為 detail.vue，這兩個都是子組件。
我們在 keep-alive 添加列表頁的名字，緩存列表頁。
然后在列表頁的 created 函數(shù)里添加 ajax 請求，這樣只有第一次進入到列表頁的時候才會請求數(shù)據(jù)，當(dāng)從列表頁跳到詳情頁，再從詳情頁回來的時候，列表頁就不會刷新。這樣就可以解決問題了。
需求二：
在需求一的基礎(chǔ)上，再加一個要求：可以在詳情頁中刪除對應(yīng)的列表項，這時返回到列表頁時需要刷新重新獲取數(shù)據(jù)。
我們可以在路由配置文件上對 detail.vue 增加一個 meta 屬性。
????????{
???????????path:?'/detail',
???????????name:?'detail',
???????????component:?()?=>?import('../view/detail.vue'),
???????????meta:?{isRefresh:?true}
???????},
這個 meta 屬性，可以在詳情頁中通過 this.$route.meta.isRefresh 來讀取和設(shè)置。
設(shè)置完這個屬性，還要在 App.vue 文件里設(shè)置 watch 一下 $route 屬性。
????watch:?{
???????$route(to,?from)?{
???????????const?fname?=?from.name
???????????const?tname?=?to.name
???????????if?(from.meta.isRefresh?||?(fname?!=?'detail'?&&?tname?==?'list'))?{
???????????????from.meta.isRefresh?=?false
???????//?在這里重新請求數(shù)據(jù)
???????????}
???????}
???},
這樣就不需要在列表頁的 created 函數(shù)里用 ajax 來請求數(shù)據(jù)了，統(tǒng)一放在 App.vue 里來處理。
觸發(fā)請求數(shù)據(jù)有兩個條件：
從其他頁面（除了詳情頁）進來列表時，需要請求數(shù)據(jù)。 從詳情頁返回到列表頁時，如果詳情頁 meta屬性中的isRefresh為true，也需要重新請求數(shù)據(jù)。
當(dāng)我們在詳情頁中刪除了對應(yīng)的列表項時，就可以將詳情頁 meta 屬性中的 isRefresh 設(shè)為 true。這時再返回到列表頁，頁面會重新刷新。
解決方案二
對于需求二其實還有一個更簡潔的方案，那就是使用 router-view 的 key 屬性。
<keep-alive>
????<router-view?:key="$route.fullPath"/>
keep-alive>
首先 keep-alive 讓所有頁面都緩存，當(dāng)你不想緩存某個路由頁面，要重新加載它時，可以在跳轉(zhuǎn)時傳一個隨機字符串，這樣它就能重新加載了。例如從列表頁進入了詳情頁，然后在詳情頁中刪除了列表頁中的某個選項，此時從詳情頁退回列表頁時就要刷新，我們可以這樣跳轉(zhuǎn)：
this.$router.push({
????path:?'/list',
????query:?{?'randomID':?'id'?+?Math.random()?},
})
這樣的方案相對來說還是更簡潔的。
4. 多個請求下 loading 的展示與關(guān)閉
一般情況下，在 vue 中結(jié)合 axios 的攔截器控制 loading 展示和關(guān)閉，是這樣的：
在 App.vue 配置一個全局 loading。
????<div?class="app">
????????<keep-alive?:include="keepAliveData">
????????????<router-view/>
????????keep-alive>
????????<div?class="loading"?v-show="isShowLoading">
????????????<Spin?size="large">Spin>
????????div>
????div>
同時設(shè)置 axios 攔截器。
?//?添加請求攔截器
?this.$axios.interceptors.request.use(config?=>?{
?????this.isShowLoading?=?true
?????return?config
?},?error?=>?{
?????this.isShowLoading?=?false
?????return?Promise.reject(error)
?})
?//?添加響應(yīng)攔截器
?this.$axios.interceptors.response.use(response?=>?{
?????this.isShowLoading?=?false
?????return?response
?},?error?=>?{
?????this.isShowLoading?=?false
?????return?Promise.reject(error)
?})
這個攔截器的功能是在請求前打開 loading，請求結(jié)束或出錯時關(guān)閉 loading。
如果每次只有一個請求，這樣運行是沒問題的。但同時有多個請求并發(fā)，就會有問題了。
舉例：
假如現(xiàn)在同時發(fā)起兩個請求，在請求前，攔截器 this.isShowLoading = true 將 loading 打開。
現(xiàn)在有一個請求結(jié)束了。this.isShowLoading = false 攔截器關(guān)閉 loading，但是另一個請求由于某些原因并沒有結(jié)束。
造成的后果就是頁面請求還沒完成，loading 卻關(guān)閉了，用戶會以為頁面加載完成了，結(jié)果頁面不能正常運行，導(dǎo)致用戶體驗不好。
解決方案
增加一個 loadingCount 變量，用來計算請求的次數(shù)。
loadingCount:?0
再增加兩個方法，來對 loadingCount ?進行增減操作。
????methods:?{
????????addLoading()?{
????????????this.isShowLoading?=?true
????????????this.loadingCount++
????????},
????????isCloseLoading()?{
????????????this.loadingCount--
????????????if?(this.loadingCount?==?0)?{
????????????????this.isShowLoading?=?false
????????????}
????????}
????}
現(xiàn)在攔截器變成這樣：
????????//?添加請求攔截器
????????this.$axios.interceptors.request.use(config?=>?{
????????????this.addLoading()
????????????return?config
????????},?error?=>?{
????????????this.isShowLoading?=?false
????????????this.loadingCount?=?0
????????????this.$Message.error('網(wǎng)絡(luò)異常，請稍后再試')
????????????return?Promise.reject(error)
????????})
????????//?添加響應(yīng)攔截器
????????this.$axios.interceptors.response.use(response?=>?{
????????????this.isCloseLoading()
????????????return?response
????????},?error?=>?{
????????????this.isShowLoading?=?false
????????????this.loadingCount?=?0
????????????this.$Message.error('網(wǎng)絡(luò)異常，請稍后再試')
????????????return?Promise.reject(error)
????????})
這個攔截器的功能是：
每當(dāng)發(fā)起一個請求，打開 loading，同時 loadingCount 加1。
每當(dāng)一個請求結(jié)束， loadingCount 減1，并判斷 ?loadingCount 是否為 0，如果為 0，則關(guān)閉 loading。
這樣即可解決，多個請求下有某個請求提前結(jié)束，導(dǎo)致 loading 關(guān)閉的問題。
5. 表格打印
打印需要用到的組件為 print-js
普通表格打印
一般的表格打印直接仿照組件提供的例子就可以了。
printJS({
????printable:?id,?//?DOM?id
????type:?'html',
????scanStyles:?false,
})
element-ui 表格打印（其他組件庫的表格同理）
element-ui 的表格，表面上看起來是一個表格，實際上是由兩個表格組成的。
表頭為一個表格，表體又是個表格，這就導(dǎo)致了一個問題：打印的時候表體和表頭錯位。
另外，在表格出現(xiàn)滾動條的時候，也會造成錯位。
解決方案
我的思路是將兩個表格合成一個表格，print-js 組件打印的時候，實際上是把 id 對應(yīng)的 DOM 里的內(nèi)容提取出來打印。所以，在傳入 id 之前，可以先把表頭所在的表格內(nèi)容提取出來，插入到第二個表格里，從而將兩個表格合并，這時候打印就不會有錯位的問題了。
function?printHTML(id)?{
????const?html?=?document.querySelector('#'?+?id).innerHTML
????//?新建一個?DOM
????const?div?=?document.createElement('div')
????const?printDOMID?=?'printDOMElement'
????div.id?=?printDOMID
????div.innerHTML?=?html
????//?提取第一個表格的內(nèi)容?即表頭
????const?ths?=?div.querySelectorAll('.el-table__header-wrapper?th')
????const?ThsTextArry?=?[]
????for?(let?i?=?0,?len?=?ths.length;?i?????????if?(ths[i].innerText?!==?'')?ThsTextArry.push(ths[i].innerText)
????}
????//?刪除多余的表頭
????div.querySelector('.hidden-columns').remove()
????//?第一個表格的內(nèi)容提取出來后已經(jīng)沒用了?刪掉
????div.querySelector('.el-table__header-wrapper').remove()
????//?將第一個表格的內(nèi)容插入到第二個表格
????let?newHTML?=?''
????for?(let?i?=?0,?len?=?ThsTextArry.length;?i?????????newHTML?+=?'' ?+?ThsTextArry[i]?+?''
????}
????newHTML?+=?' '
????div.querySelector('.el-table__body-wrapper?table').insertAdjacentHTML('afterbegin',?newHTML)
????//?將新的?DIV?添加到頁面?打印后再刪掉
????document.querySelector('body').appendChild(div)
????
????printJS({
????????printable:?printDOMID,
????????type:?'html',
????????scanStyles:?false,
????????style:?'table?{?border-collapse:?collapse?}'?//?表格樣式
????})
????div.remove()
}
6. 下載二進制文件
平時在前端下載文件有兩種方式，一種是后臺提供一個 URL，然后用 window.open(URL) 下載，另一種就是后臺直接返回文件的二進制內(nèi)容，然后前端轉(zhuǎn)化一下再下載。
由于第一種方式比較簡單，在此不做探討。本文主要講解一下第二種方式怎么實現(xiàn)。
第二種方式需要用到 Blob 對象， mdn 文檔上是這樣介紹的：
Blob 對象表示一個不可變、原始數(shù)據(jù)的類文件對象。Blob 表示的不一定是JavaScript原生格式的數(shù)據(jù)
具體使用方法
axios({
??method:?'post',
??url:?'/export',
})
.then(res?=>?{
??//?假設(shè)?data?是返回來的二進制數(shù)據(jù)
??const?data?=?res.data
??const?url?=?window.URL.createObjectURL(new?Blob([data],?{type:?"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}))
??const?link?=?document.createElement('a')
??link.style.display?=?'none'
??link.href?=?url
??link.setAttribute('download',?'excel.xlsx')
??document.body.appendChild(link)
??link.click()
??document.body.removeChild(link)
})
打開下載的文件，看看結(jié)果是否正確。
一堆亂碼...
一定有哪里不對。
最后發(fā)現(xiàn)是參數(shù) responseType 的問題，responseType 它表示服務(wù)器響應(yīng)的數(shù)據(jù)類型。由于后臺返回來的是二進制數(shù)據(jù)，所以我們要把它設(shè)為 arraybuffer，
接下來再看看結(jié)果是否正確。
axios({
??method:?'post',
??url:?'/export',
??responseType:?'arraybuffer',
})
.then(res?=>?{
??//?假設(shè)?data?是返回來的二進制數(shù)據(jù)
??const?data?=?res.data
??const?url?=?window.URL.createObjectURL(new?Blob([data],?{type:?"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}))
??const?link?=?document.createElement('a')
??link.style.display?=?'none'
??link.href?=?url
??link.setAttribute('download',?'excel.xlsx')
??document.body.appendChild(link)
??link.click()
??document.body.removeChild(link)
})
這次沒有問題，文件能正常打開，內(nèi)容也是正常的，不再是亂碼。
根據(jù)后臺接口內(nèi)容決定是否下載文件
作者的項目有大量的頁面都有下載文件的需求，而且這個需求還有點變態(tài)。
具體需求如下
如果下載文件的數(shù)據(jù)量條數(shù)符合要求，正常下載（每個頁面限制下載數(shù)據(jù)量是不一樣的，所以不能在前端寫死）。 如果文件過大，后臺返回 { code: 199999, msg: '文件過大，請重新設(shè)置查詢項', data: null }，然后前端再進行報錯提示。
先來分析一下，首先根據(jù)上文，我們都知道下載文件的接口響應(yīng)數(shù)據(jù)類型為 arraybuffer。返回的數(shù)據(jù)無論是二進制文件，還是 JSON 字符串，前端接收到的其實都是 arraybuffer。所以我們要對 arraybuffer 的內(nèi)容作個判斷，在接收到數(shù)據(jù)時將它轉(zhuǎn)換為字符串，判斷是否有 code: 199999。如果有，則報錯提示，如果沒有，則是正常文件，下載即可。具體實現(xiàn)如下：
axios.interceptors.response.use(response?=>?{
????const?res?=?response.data
????//?判斷響應(yīng)數(shù)據(jù)類型是否?ArrayBuffer，true?則是下載文件接口，false?則是正常接口
????if?(res?instanceof?ArrayBuffer)?{
????????const?utf8decoder?=?new?TextDecoder()
????????const?u8arr?=?new?Uint8Array(res)
????????//?將二進制數(shù)據(jù)轉(zhuǎn)為字符串
????????const?temp?=?utf8decoder.decode(u8arr)
????????if?(temp.includes('{code:199999'))?{
????????????Message({
?????????????//?字符串轉(zhuǎn)為?JSON?對象
????????????????message:?JSON.parse(temp).msg,
????????????????type:?'error',
????????????????duration:?5000,
????????????})
????????????return?Promise.reject()
????????}
????}
????//?正常類型接口，省略代碼...
????return?res
},?(error)?=>?{
????//?省略代碼...
????return?Promise.reject(error)
})
7. 自動忽略 console.log 語句
export?function?rewirteLog()?{
????console.log?=?(function?(log)?{
????????return?process.env.NODE_ENV?==?'development'??log?:?function()?{}
????}(console.log))
}
在 main.js 引入這個函數(shù)并執(zhí)行一次，就可以實現(xiàn)忽略 console.log 語句的效果。
