有一些問題不限於 Vue，還適應於其他型別的 SPA 專案。
1. 頁面許可權控制和登陸驗證
頁面許可權控制
頁面許可權控制是什麼意思呢？
就是一個網站有不同的角色，比如管理員和普通使用者，要求不同的角色能訪問的頁面是不一樣的。如果一個頁面，有角色越權訪問，這時就得做出限制了。
一種方法是通過動態新增路由和選單來做控制，不能訪問的頁面不新增到路由表裡，這是其中一種辦法。具體細節請看下一節的《動態選單》。
另一種辦法就是所有的頁面都在路由表裡，只是在訪問的時候要判斷一下角色許可權。如果有許可權就允許訪問，沒有許可權就拒絕，跳轉到 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')
},
]
頁面控制
// 假設角色有兩種：admin 和 user
// 這裡是從後臺獲取的使用者角色
const role = 'user'
// 在進入一個頁面前會觸發 router.beforeEach 事件
router.beforeEach((to, from, next) => {
if (to.meta.roles.includes(role)) {
next()
} else {
next({path: '/404'})
}
})
登陸驗證
網站一般只要登陸過一次後，接下來該網站的其他頁面都是可以直接訪問的，不用再次登陸。我們可以通過 token 或 cookie 來實現，下面用程式碼來展示一下如何用 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. 動態選單
寫後臺管理系統，估計有不少人遇過這樣的需求：根據後臺資料動態新增路由和選單。為什麼這麼做呢？因為不同的使用者有不同的許可權，能訪問的頁面是不一樣的。
動態新增路由
利用 vue-router 的 addRoutes 方法可以動態新增路由。
先看一下官方介紹：
router.addRoutes
router.addRoutes(routes: Array<RouteConfig>)
動態新增更多的路由規則。引數必須是一個符合 routes 選項要求的陣列。
舉個例子：
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')
}
])
在動態新增路由的過程中，如果有 404 頁面，一定要放在最後新增，否則在登陸的時候新增完頁面會重定向到 404 頁面。
類似於這樣，這種規則一定要最後新增。
{path: '*', redirect: '/404'}
動態生成選單
假設後臺返回來的資料長這樣：
// 左側選單欄資料
menuItems: [
{
name: 'home', // 要跳轉的路由名稱 不是路徑
size: 18, // icon大小
type: 'md-home', // icon型別
text: '主頁' // 文字內容
},
{
text: '二級選單',
type: 'ios-paper',
children: [
{
type: 'ios-grid',
name: 't1',
text: '表格'
},
{
text: '三級選單',
type: 'ios-paper',
children: [
{
type: 'ios-notifications-outline',
name: 'msg',
text: '檢視訊息'
},
]
}
]
}
]
來看看怎麼將它轉化為選單欄，我在這裡使用了 iview 的元件，不用重複造輪子。
<!-- 選單欄 -->
<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 不停的對子陣列進行迴圈，生成三級選單。
不過這個動態選單有缺陷，就是隻支援三級選單。一個更好的做法是把生成選單的過程封裝成元件，然後遞迴呼叫，這樣就能支援無限級的選單。在生菜選單時，需要判斷一下是否還有子選單，如果有就遞迴呼叫元件。
動態路由因為上面已經說過了用 addRoutes 來實現，現在看看具體怎麼做。
首先，要把專案所有的頁面路由都列出來，再用後臺返回來的資料動態匹配，能匹配上的就把路由加上，不能匹配上的就不加。最後把這個新生成的路由資料用 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')
}
}
// 傳入後臺資料 生成路由表
menusToRoutes(menusData)
// 將選單資訊轉成對應的路由資訊 動態新增
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)
})
}
}
動態選單的程式碼實現放在 github 上，分別放在這個專案的 src/components/Index.vue、src/permission.js 和 src/utils/index.js 檔案裡。
3. 前進重新整理後退不重新整理
需求一：
在一個列表頁中，第一次進入的時候，請求獲取資料。
點選某個列表項，跳到詳情頁，再從詳情頁後退回到列表頁時，不重新整理。
也就是說從其他頁面進到列表頁，需要重新整理獲取資料，從詳情頁返回到列表頁時不要重新整理。
解決方案
在 App.vue設定：
<keep-alive include="list">
<router-view/>
</keep-alive>
假設列表頁為 list.vue，詳情頁為 detail.vue，這兩個都是子元件。
我們在 keep-alive 新增列表頁的名字，快取列表頁。
然後在列表頁的 created 函式裡新增 ajax 請求，這樣只有第一次進入到列表頁的時候才會請求資料，當從列表頁跳到詳情頁，再從詳情頁回來的時候，列表頁就不會重新整理。這樣就可以解決問題了。
需求二：
在需求一的基礎上，再加一個要求：可以在詳情頁中刪除對應的列表項，這時返回到列表頁時需要重新整理重新獲取資料。
我們可以在路由配置檔案上對 detail.vue 增加一個 meta 屬性。
{
path: '/detail',
name: 'detail',
component: () => import('../view/detail.vue'),
meta: {isRefresh: true}
},
這個 meta 屬性，可以在詳情頁中通過 this.$route.meta.isRefresh 來讀取和設定。
設定完這個屬性，還要在 App.vue 檔案裡設定 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
// 在這裡重新請求資料
}
}
},
這樣就不需要在列表頁的 created 函式裡用 ajax 來請求資料了，統一放在 App.vue 裡來處理。
觸發請求資料有兩個條件：
- 從其他頁面（除了詳情頁）進來列表時，需要請求資料。
- 從詳情頁返回到列表頁時，如果詳情頁
meta屬性中的isRefresh為true，也需要重新請求資料。
當我們在詳情頁中刪除了對應的列表項時，就可以將詳情頁 meta 屬性中的 isRefresh 設為 true。這時再返回到列表頁，頁面會重新重新整理。
解決方案二
對於需求二其實還有一個更簡潔的方案，那就是使用 router-view 的 key 屬性。
<keep-alive>
<router-view :key="$route.fullPath"/>
</keep-alive>
首先 keep-alive 讓所有頁面都快取，當你不想快取某個路由頁面，要重新載入它時，可以在跳轉時傳一個隨機字串，這樣它就能重新載入了。例如從列表頁進入了詳情頁，然後在詳情頁中刪除了列表頁中的某個選項，此時從詳情頁退回列表頁時就要重新整理，我們可以這樣跳轉：
this.$router.push({
path: '/list',
query: { 'randomID': 'id' + Math.random() },
})
這樣的方案相對來說還是更簡潔的。
4. 多個請求下 loading 的展示與關閉
一般情況下，在 vue 中結合 axios 的攔截器控制 loading 展示和關閉，是這樣的：
在 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>
同時設定 axios 攔截器。
// 新增請求攔截器
this.$axios.interceptors.request.use(config => {
this.isShowLoading = true
return config
}, error => {
this.isShowLoading = false
return Promise.reject(error)
})
// 新增響應攔截器
this.$axios.interceptors.response.use(response => {
this.isShowLoading = false
return response
}, error => {
this.isShowLoading = false
return Promise.reject(error)
})
這個攔截器的功能是在請求前開啟 loading，請求結束或出錯時關閉 loading。
如果每次只有一個請求，這樣執行是沒問題的。但同時有多個請求併發，就會有問題了。
舉例：
假如現在同時發起兩個請求，在請求前，攔截器 this.isShowLoading = true 將 loading 開啟。
現在有一個請求結束了。this.isShowLoading = false 攔截器關閉 loading，但是另一個請求由於某些原因並沒有結束。
造成的後果就是頁面請求還沒完成，loading 卻關閉了，使用者會以為頁面載入完成了，結果頁面不能正常執行，導致使用者體驗不好。
解決方案
增加一個 loadingCount 變數，用來計算請求的次數。
loadingCount: 0
再增加兩個方法，來對 loadingCount 進行增減操作。
methods: {
addLoading() {
this.isShowLoading = true
this.loadingCount++
},
isCloseLoading() {
this.loadingCount--
if (this.loadingCount == 0) {
this.isShowLoading = false
}
}
}
現在攔截器變成這樣：
// 新增請求攔截器
this.$axios.interceptors.request.use(config => {
this.addLoading()
return config
}, error => {
this.isShowLoading = false
this.loadingCount = 0
this.$Message.error('網路異常，請稍後再試')
return Promise.reject(error)
})
// 新增響應攔截器
this.$axios.interceptors.response.use(response => {
this.isCloseLoading()
return response
}, error => {
this.isShowLoading = false
this.loadingCount = 0
this.$Message.error('網路異常，請稍後再試')
return Promise.reject(error)
})
這個攔截器的功能是：
每當發起一個請求，開啟 loading，同時 loadingCount 加1。
每當一個請求結束， loadingCount 減1，並判斷 loadingCount 是否為 0，如果為 0，則關閉 loading。
這樣即可解決，多個請求下有某個請求提前結束，導致 loading 關閉的問題。
5. 表格列印
列印需要用到的元件為 print-js
普通表格列印
一般的表格列印直接仿照元件提供的例子就可以了。
printJS({
printable: id, // DOM id
type: 'html',
scanStyles: false,
})
element-ui 表格列印（其他元件庫的表格同理）
element-ui 的表格，表面上看起來是一個表格，實際上是由兩個表格組成的。
表頭為一個表格，表體又是個表格，這就導致了一個問題：列印的時候表體和表頭錯位。
另外，在表格出現滾動條的時候，也會造成錯位。
解決方案
我的思路是將兩個表格合成一個表格，print-js 元件列印的時候，實際上是把 id 對應的 DOM 裡的內容提取出來列印。所以，在傳入 id 之前，可以先把表頭所在的表格內容提取出來，插入到第二個表格裡，從而將兩個表格合併，這時候列印就不會有錯位的問題了。
function printHTML(id) {
const html = document.querySelector('#' + id).innerHTML
// 新建一個 DOM
const div = document.createElement('div')
const printDOMID = 'printDOMElement'
div.id = printDOMID
div.innerHTML = html
// 提取第一個表格的內容 即表頭
const ths = div.querySelectorAll('.el-table__header-wrapper th')
const ThsTextArry = []
for (let i = 0, len = ths.length; i < len; i++) {
if (ths[i].innerText !== '') ThsTextArry.push(ths[i].innerText)
}
// 刪除多餘的表頭
div.querySelector('.hidden-columns').remove()
// 第一個表格的內容提取出來後已經沒用了 刪掉
div.querySelector('.el-table__header-wrapper').remove()
// 將第一個表格的內容插入到第二個表格
let newHTML = '<tr>'
for (let i = 0, len = ThsTextArry.length; i < len; i++) {
newHTML += '<td style="text-align: center; font-weight: bold">' + ThsTextArry[i] + '</td>'
}
newHTML += '</tr>'
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) 下載，另一種就是後臺直接返回檔案的二進位制內容，然後前端轉化一下再下載。
由於第一種方式比較簡單，在此不做探討。本文主要講解一下第二種方式怎麼實現。
第二種方式需要用到 Blob 物件， mdn 文件上是這樣介紹的：
Blob 物件表示一個不可變、原始資料的類檔案物件。Blob 表示的不一定是JavaScript原生格式的資料
具體使用方法
axios({
method: 'post',
url: '/export',
})
.then(res => {
// 假設 data 是返回來的二進位制資料
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)
})
開啟下載的檔案，看看結果是否正確。
在這裡插入圖片描述
一堆亂碼...
一定有哪裡不對。
最後發現是引數 responseType 的問題，responseType 它表示伺服器響應的資料型別。由於後臺返回來的是二進位制資料，所以我們要把它設為 arraybuffer， 接下來再看看結果是否正確。
axios({
method: 'post',
url: '/export',
responseType: 'arraybuffer',
})
.then(res => {
// 假設 data 是返回來的二進位制資料
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)
})
這次沒有問題，檔案能正常開啟，內容也是正常的，不再是亂碼。
根據後臺介面內容決定是否下載檔案
作者的專案有大量的頁面都有下載檔案的需求，而且這個需求還有點變態。
具體需求如下
- 如果下載檔案的資料量條數符合要求，正常下載（每個頁面限制下載資料量是不一樣的，所以不能在前端寫死）。
- 如果檔案過大，後臺返回
{ code: 199999, msg: '檔案過大，請重新設定查詢項', data: null }，然後前端再進行報錯提示。
先來分析一下，首先根據上文，我們都知道下載檔案的介面響應資料型別為 arraybuffer。返回的資料無論是二進位制檔案，還是 JSON 字串，前端接收到的其實都是 arraybuffer。所以我們要對 arraybuffer 的內容作個判斷，在接收到資料時將它轉換為字串，判斷是否有 code: 199999。如果有，則報錯提示，如果沒有，則是正常檔案，下載即可。具體實現如下：
axios.interceptors.response.use(response => {
const res = response.data
// 判斷響應資料型別是否 ArrayBuffer，true 則是下載檔案介面，false 則是正常介面
if (res instanceof ArrayBuffer) {
const utf8decoder = new TextDecoder()
const u8arr = new Uint8Array(res)
// 將二進位制資料轉為字串
const temp = utf8decoder.decode(u8arr)
if (temp.includes('{code:199999')) {
Message({
// 字串轉為 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 引入這個函式並執行一次，就可以實現忽略 console.log 語句的效果。