热久久久久久,亚洲天堂2018av,亚洲免费二区

有一些問(wèn)題不限于 Vue，還適應(yīng)于其他類型的 SPA 項(xiàng)目。

1. 頁(yè)面權(quán)限控制和登陸驗(yàn)證頁(yè)面權(quán)限控制

頁(yè)面權(quán)限控制是什么意思呢？

就是一個(gè)網(wǎng)站有不同的角色，比如管理員和普通用戶，要求不同的角色能訪問(wèn)的頁(yè)面是不一樣的。如果一個(gè)頁(yè)面，有角色越權(quán)訪問(wèn)，這時(shí)就得做出限制了。

一種方法是通過(guò)動(dòng)態(tài)添加路由和菜單來(lái)做控制，不能訪問(wèn)的頁(yè)面不添加到路由表里，這是其中一種辦法。具體細(xì)節(jié)請(qǐng)看下一節(jié)的《動(dòng)態(tài)菜單》。

另一種辦法就是所有的頁(yè)面都在路由表里，只是在訪問(wèn)的時(shí)候要判斷一下角色權(quán)限。如果有權(quán)限就允許訪問(wèn)，沒(méi)有權(quán)限就拒絕，跳轉(zhuǎn)到 404 頁(yè)面。

思路

在每一個(gè)路由的meta屬性里，將能訪問(wèn)該路由的角色添加到roles里。用戶每次登陸后，將用戶的角色返回。然后在訪問(wèn)頁(yè)面時(shí)，把路由的meta屬性和用戶的角色進(jìn)行對(duì)比，如果用戶的角色在路由的roles里，那就是能訪問(wèn)，如果不在就拒絕訪問(wèn)。

代碼示例

路由信息

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')
 },
]

頁(yè)面控制

// 假設(shè)角色有兩種：admin 和 user
// 這里是從后臺(tái)獲取的用戶角色
const role = 'user'
// 在進(jìn)入一個(gè)頁(yè)面前會(huì)觸發(fā) router.beforeEach 事件
router.beforeEach((to, from, next) => {
 if (to.meta.roles.includes(role)) {
 next()
 } else {
 next({path: '/404'})
 }
})

登陸驗(yàn)證

網(wǎng)站一般只要登陸過(guò)一次后，接下來(lái)該網(wǎng)站的其他頁(yè)面都是可以直接訪問(wèn)的，不用再次登陸。我們可以通過(guò)token或cookie來(lái)實(shí)現(xiàn)，下面用代碼來(lái)展示一下如何用token控制登陸驗(yàn)證。

router.beforeEach((to, from, next) => {
 // 如果有token 說(shuō)明該用戶已登陸
 if (localStorage.getItem('token')) {
 // 在已登陸的情況下訪問(wèn)登陸頁(yè)會(huì)重定向到首頁(yè)
 if (to.path === '/login') {
 next({path: '/'})
 } else {
 next({path: to.path || '/'})
 }
 } else {
 // 沒(méi)有登陸則訪問(wèn)任何頁(yè)面都重定向到登陸頁(yè)
 if (to.path === '/login') {
 next()
 } else {
 next(`/login?redirect=${to.path}`)
 }
 }
})

2. 動(dòng)態(tài)菜單

寫(xiě)后臺(tái)管理系統(tǒng)，估計(jì)有不少人遇過(guò)這樣的需求：根據(jù)后臺(tái)數(shù)據(jù)動(dòng)態(tài)添加路由和菜單。為什么這么做呢？因?yàn)椴煌挠脩粲胁煌臋?quán)限，能訪問(wèn)的頁(yè)面是不一樣的。

動(dòng)態(tài)添加路由

利用 vue-router 的addRoutes方法可以動(dòng)態(tài)添加路由。

先看一下官方介紹：

router.addRoutes

router.addRoutes(routes: Array<RouteConfig>)

動(dòng)態(tài)添加更多的路由規(guī)則。參數(shù)必須是一個(gè)符合routes選項(xiàng)要求的數(shù)組。

舉個(gè)例子：

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')
 }
])

在動(dòng)態(tài)添加路由的過(guò)程中，如果有 404 頁(yè)面，一定要放在最后添加，否則在登陸的時(shí)候添加完頁(yè)面會(huì)重定向到 404 頁(yè)面。

類似于這樣，這種規(guī)則一定要最后添加。

{path: '*', redirect: '/404'}

動(dòng)態(tài)生成菜單

假設(shè)后臺(tái)返回來(lái)的數(shù)據(jù)長(zhǎng)這樣：

// 左側(cè)菜單欄數(shù)據(jù)
menuItems: [
 {
 name: 'home', // 要跳轉(zhuǎn)的路由名稱 不是路徑
 size: 18, // icon大小
 type: 'md-home', // icon類型
 text: '主頁(yè)' // 文本內(nèi)容
 },
 {
 text: '二級(jí)菜單',
 type: 'ios-paper',
 children: [
  {
  type: 'ios-grid',
  name: 't1',
  text: '表格'
  },
  {
  text: '三級(jí)菜單',
  type: 'ios-paper',
  children: [
   {
   type: 'ios-notifications-outline',
   name: 'msg',
   text: '查看消息'
   },
  ]
  }
 ]
 }
]

來(lái)看看怎么將它轉(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">
 <!-- 動(dòng)態(tài)菜單 -->
 <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>

代碼不用看得太仔細(xì)，理解原理即可，其實(shí)就是通過(guò)三次v-for不停的對(duì)子數(shù)組進(jìn)行循環(huán)，生成三級(jí)菜單。

不過(guò)這個(gè)動(dòng)態(tài)菜單有缺陷，就是只支持三級(jí)菜單。一個(gè)更好的做法是把生成菜單的過(guò)程封裝成組件，然后遞歸調(diào)用，這樣就能支持無(wú)限級(jí)的菜單。在生菜菜單時(shí)，需要判斷一下是否還有子菜單，如果有就遞歸調(diào)用組件。

動(dòng)態(tài)路由因?yàn)樯厦嬉呀?jīng)說(shuō)過(guò)了用addRoutes來(lái)實(shí)現(xiàn)，現(xiàn)在看看具體怎么做。

首先，要把項(xiàng)目所有的頁(yè)面路由都列出來(lái)，再用后臺(tái)返回來(lái)的數(shù)據(jù)動(dòng)態(tài)匹配，能匹配上的就把路由加上，不能匹配上的就不加。最后把這個(gè)新生成的路由數(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')
 }
}

// 傳入后臺(tái)數(shù)據(jù) 生成路由表
menusToRoutes(menusData)

// 將菜單信息轉(zhuǎn)成對(duì)應(yīng)的路由信息 動(dò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頁(yè)面 否則會(huì)在登陸成功后跳到404頁(yè)面
 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)
 })
 }
}

動(dòng)態(tài)菜單的代碼實(shí)現(xiàn)放在 github 上，分別放在這個(gè)項(xiàng)目的src/components/Index.vue、src/permission.js和src/utils/index.js文件里。

3. 前進(jìn)刷新后退不刷新需求一：

在一個(gè)列表頁(yè)中，第一次進(jìn)入的時(shí)候，請(qǐng)求獲取數(shù)據(jù)。

點(diǎn)擊某個(gè)列表項(xiàng)，跳到詳情頁(yè)，再?gòu)脑斍轫?yè)后退回到列表頁(yè)時(shí)，不刷新。

也就是說(shuō)從其他頁(yè)面進(jìn)到列表頁(yè)，需要刷新獲取數(shù)據(jù)，從詳情頁(yè)返回到列表頁(yè)時(shí)不要刷新。

解決方案

在App.vue設(shè)置：

 <keep-alive include="list">
  <router-view/>
 </keep-alive>

假設(shè)列表頁(yè)為list.vue，詳情頁(yè)為detail.vue，這兩個(gè)都是子組件。

我們?cè)趉eep-alive添加列表頁(yè)的名字，緩存列表頁(yè)。

然后在列表頁(yè)的created函數(shù)里添加 ajax 請(qǐng)求，這樣只有第一次進(jìn)入到列表頁(yè)的時(shí)候才會(huì)請(qǐng)求數(shù)據(jù)，當(dāng)從列表頁(yè)跳到詳情頁(yè)，再?gòu)脑斍轫?yè)回來(lái)的時(shí)候，列表頁(yè)就不會(huì)刷新。這樣就可以解決問(wèn)題了。

需求二：

在需求一的基礎(chǔ)上，再加一個(gè)要求：可以在詳情頁(yè)中刪除對(duì)應(yīng)的列表項(xiàng)，這時(shí)返回到列表頁(yè)時(shí)需要刷新重新獲取數(shù)據(jù)。

我們可以在路由配置文件上對(duì)detail.vue增加一個(gè)meta屬性。

 {
  path: '/detail',
  name: 'detail',
  component: () => import('../view/detail.vue'),
  meta: {isRefresh: true}
 },

這個(gè)meta屬性，可以在詳情頁(yè)中通過(guò)this.$route.meta.isRefresh來(lái)讀取和設(shè)置。

設(shè)置完這個(gè)屬性，還要在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
 // 在這里重新請(qǐng)求數(shù)據(jù)
  }
 }
 },

這樣就不需要在列表頁(yè)的created函數(shù)里用 ajax 來(lái)請(qǐng)求數(shù)據(jù)了，統(tǒng)一放在App.vue里來(lái)處理。

觸發(fā)請(qǐng)求數(shù)據(jù)有兩個(gè)條件：

從其他頁(yè)面（除了詳情頁(yè)）進(jìn)來(lái)列表時(shí)，需要請(qǐng)求數(shù)據(jù)。從詳情頁(yè)返回到列表頁(yè)時(shí)，如果詳情頁(yè)meta屬性中的isRefresh為true，也需要重新請(qǐng)求數(shù)據(jù)。

當(dāng)我們?cè)谠斍轫?yè)中刪除了對(duì)應(yīng)的列表項(xiàng)時(shí)，就可以將詳情頁(yè)meta屬性中的isRefresh設(shè)為true。這時(shí)再返回到列表頁(yè)，頁(yè)面會(huì)重新刷新。

解決方案二

對(duì)于需求二其實(shí)還有一個(gè)更簡(jiǎn)潔的方案，那就是使用 router-view 的key屬性。

<keep-alive>
 <router-view :key="$route.fullPath"/>
</keep-alive>

首先 keep-alive 讓所有頁(yè)面都緩存，當(dāng)你不想緩存某個(gè)路由頁(yè)面，要重新加載它時(shí)，可以在跳轉(zhuǎn)時(shí)傳一個(gè)隨機(jī)字符串，這樣它就能重新加載了。例如從列表頁(yè)進(jìn)入了詳情頁(yè)，然后在詳情頁(yè)中刪除了列表頁(yè)中的某個(gè)選項(xiàng)，此時(shí)從詳情頁(yè)退回列表頁(yè)時(shí)就要刷新，我們可以這樣跳轉(zhuǎn)：

this.$router.push({
 path: '/list',
 query: { 'randomID': 'id' + Math.random() },
})

這樣的方案相對(duì)來(lái)說(shuō)還是更簡(jiǎn)潔的。

4. 多個(gè)請(qǐng)求下 loading 的展示與關(guān)閉

一般情況下，在 vue 中結(jié)合 axios 的攔截器控制 loading 展示和關(guān)閉，是這樣的：

在App.vue配置一個(gè)全局 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í)設(shè)置 axios 攔截器。

 // 添加請(qǐng)求攔截器
 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)
 })

這個(gè)攔截器的功能是在請(qǐng)求前打開(kāi) loading，請(qǐng)求結(jié)束或出錯(cuò)時(shí)關(guān)閉 loading。

如果每次只有一個(gè)請(qǐng)求，這樣運(yùn)行是沒(méi)問(wèn)題的。但同時(shí)有多個(gè)請(qǐng)求并發(fā)，就會(huì)有問(wèn)題了。

舉例：

假如現(xiàn)在同時(shí)發(fā)起兩個(gè)請(qǐng)求，在請(qǐng)求前，攔截器this.isShowLoading = true將 loading 打開(kāi)。

現(xiàn)在有一個(gè)請(qǐng)求結(jié)束了。this.isShowLoading = false攔截器關(guān)閉 loading，但是另一個(gè)請(qǐng)求由于某些原因并沒(méi)有結(jié)束。

造成的后果就是頁(yè)面請(qǐng)求還沒(méi)完成，loading 卻關(guān)閉了，用戶會(huì)以為頁(yè)面加載完成了，結(jié)果頁(yè)面不能正常運(yùn)行，導(dǎo)致用戶體驗(yàn)不好。

解決方案

增加一個(gè)loadingCount變量，用來(lái)計(jì)算請(qǐng)求的次數(shù)。

loadingCount: 0

再增加兩個(gè)方法，來(lái)對(duì)loadingCount進(jìn)行增減操作。

 methods: {
  addLoading() {
   this.isShowLoading = true
   this.loadingCount++
  },

  isCloseLoading() {
   this.loadingCount--
   if (this.loadingCount == 0) {
    this.isShowLoading = false
   }
  }
 }

現(xiàn)在攔截器變成這樣：

  // 添加請(qǐng)求攔截器
  this.$axios.interceptors.request.use(config => {
   this.addLoading()
   return config
  }, error => {
   this.isShowLoading = false
   this.loadingCount = 0
   this.$Message.error('網(wǎng)絡(luò)異常，請(qǐng)稍后再試')
   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ò)異常，請(qǐng)稍后再試')
   return Promise.reject(error)
  })

這個(gè)攔截器的功能是：

每當(dāng)發(fā)起一個(gè)請(qǐng)求，打開(kāi) loading，同時(shí)loadingCount加1。

每當(dāng)一個(gè)請(qǐng)求結(jié)束，loadingCount減1，并判斷 loadingCount是否為 0，如果為 0，則關(guān)閉 loading。

這樣即可解決，多個(gè)請(qǐng)求下有某個(gè)請(qǐng)求提前結(jié)束，導(dǎo)致 loading 關(guān)閉的問(wèn)題。

5. 表格打印

打印需要用到的組件為 print-js

普通表格打印

一般的表格打印直接仿照組件提供的例子就可以了。

printJS({
 printable: id, // DOM id
 type: 'html',
 scanStyles: false,
})

element-ui 表格打印（其他組件庫(kù)的表格同理）

element-ui 的表格，表面上看起來(lái)是一個(gè)表格，實(shí)際上是由兩個(gè)表格組成的。

表頭為一個(gè)表格，表體又是個(gè)表格，這就導(dǎo)致了一個(gè)問(wèn)題：打印的時(shí)候表體和表頭錯(cuò)位。

vue中常見(jiàn)的問(wèn)題及解決方法總結(jié)（推薦）

另外，在表格出現(xiàn)滾動(dòng)條的時(shí)候，也會(huì)造成錯(cuò)位。

vue中常見(jiàn)的問(wèn)題及解決方法總結(jié)（推薦）

解決方案

我的思路是將兩個(gè)表格合成一個(gè)表格，print-js組件打印的時(shí)候，實(shí)際上是把 id 對(duì)應(yīng)的 DOM 里的內(nèi)容提取出來(lái)打印。所以，在傳入 id 之前，可以先把表頭所在的表格內(nèi)容提取出來(lái)，插入到第二個(gè)表格里，從而將兩個(gè)表格合并，這時(shí)候打印就不會(huì)有錯(cuò)位的問(wèn)題了。

function printHTML(id) {
 const html = document.querySelector('#' + id).innerHTML
 // 新建一個(gè) DOM
 const div = document.createElement('div')
 const printDOMID = 'printDOMElement'
 div.id = printDOMID
 div.innerHTML = html

 // 提取第一個(gè)表格的內(nèi)容 即表頭
 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()
 // 第一個(gè)表格的內(nèi)容提取出來(lái)后已經(jīng)沒(méi)用了 刪掉
 div.querySelector('.el-table__header-wrapper').remove()

 // 將第一個(gè)表格的內(nèi)容插入到第二個(gè)表格
 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 添加到頁(yè)面 打印后再刪掉
 document.querySelector('body').appendChild(div)
 
 printJS({
  printable: printDOMID,
  type: 'html',
  scanStyles: false,
  style: 'table { border-collapse: collapse }' // 表格樣式
 })

 div.remove()
}

6. 下載二進(jìn)制文件

平時(shí)在前端下載文件有兩種方式，一種是后臺(tái)提供一個(gè) URL，然后用window.open(URL)下載，另一種就是后臺(tái)直接返回文件的二進(jìn)制內(nèi)容，然后前端轉(zhuǎn)化一下再下載。

由于第一種方式比較簡(jiǎn)單，在此不做探討。本文主要講解一下第二種方式怎么實(shí)現(xiàn)。

第二種方式需要用到 Blob 對(duì)象， mdn 文檔上是這樣介紹的：

Blob 對(duì)象表示一個(gè)不可變、原始數(shù)據(jù)的類文件對(duì)象。Blob 表示的不一定是JavaScript原生格式的數(shù)據(jù)

具體使用方法

axios({
 method: 'post',
 url: '/export',
})
.then(res => {
 // 假設(shè) data 是返回來(lái)的二進(jìn)制數(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)
})

打開(kāi)下載的文件，看看結(jié)果是否正確。

vue中常見(jiàn)的問(wèn)題及解決方法總結(jié)（推薦）

一堆亂碼...

一定有哪里不對(duì)。

最后發(fā)現(xiàn)是參數(shù) responseType 的問(wèn)題，responseType 它表示服務(wù)器響應(yīng)的數(shù)據(jù)類型。由于后臺(tái)返回來(lái)的是二進(jìn)制數(shù)據(jù)，所以我們要把它設(shè)為 arraybuffer，接下來(lái)再看看結(jié)果是否正確。

axios({
 method: 'post',
 url: '/export',
 responseType: 'arraybuffer',
})
.then(res => {
 // 假設(shè) data 是返回來(lái)的二進(jìn)制數(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)
})

vue中常見(jiàn)的問(wèn)題及解決方法總結(jié)（推薦）

這次沒(méi)有問(wèn)題，文件能正常打開(kāi)，內(nèi)容也是正常的，不再是亂碼。

根據(jù)后臺(tái)接口內(nèi)容決定是否下載文件

作者的項(xiàng)目有大量的頁(yè)面都有下載文件的需求，而且這個(gè)需求還有點(diǎn)變態(tài)。

具體需求如下

如果下載文件的數(shù)據(jù)量條數(shù)符合要求，正常下載（每個(gè)頁(yè)面限制下載數(shù)據(jù)量是不一樣的，所以不能在前端寫(xiě)死）。如果文件過(guò)大，后臺(tái)返回 { code: 199999, msg: '文件過(guò)大，請(qǐng)重新設(shè)置查詢項(xiàng)', data: null }，然后前端再進(jìn)行報(bào)錯(cuò)提示。

先來(lái)分析一下，首先根據(jù)上文，我們都知道下載文件的接口響應(yīng)數(shù)據(jù)類型為 arraybuffer。返回的數(shù)據(jù)無(wú)論是二進(jìn)制文件，還是 JSON 字符串，前端接收到的其實(shí)都是 arraybuffer。所以我們要對(duì) arraybuffer 的內(nèi)容作個(gè)判斷，在接收到數(shù)據(jù)時(shí)將它轉(zhuǎn)換為字符串，判斷是否有 code: 199999。如果有，則報(bào)錯(cuò)提示，如果沒(méi)有，則是正常文件，下載即可。具體實(shí)現(xiàn)如下：

xios.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)
    // 將二進(jìn)制數(shù)據(jù)轉(zhuǎn)為字符串
    const temp = utf8decoder.decode(u8arr)
    if (temp.includes('{code:199999')) {
      Message({
       // 字符串轉(zhuǎn)為 JSON 對(duì)象
        message: JSON.parse(temp).msg,
        type: 'error',
        duration: 5000,
      })

      return Promise.reject()
    }
  }
  // 正常類型接口，省略代碼...
  return res
}, (error) => {
  // 省略代碼...
  return Promise.reject(error)
})

7. 自動(dòng)忽略 console.log 語(yǔ)句

export function rewirteLog() {
  console.log = (function (log) {
    return process.env.NODE_ENV == 'development'? log : function() {}
  }(console.log))
}

在 main.js 引入這個(gè)函數(shù)并執(zhí)行一次，就可以實(shí)現(xiàn)忽略 console.log 語(yǔ)句的效果。