封裝Vue2路由導航鉤子並在實戰中使用

這次帶給大家封裝Vue2路由導航鉤子並在實戰中使用，封裝Vue2路由導航鉤子並在實戰中使用的注意事項有哪些，下面就是實戰案例，一起來看一下。

1.寫在前面

最近在學習Vue2，遇到有些頁面請求資料需要使用者登入權限、伺服器回應不符預期的問題，但是總不能每個頁面都做單獨處理吧，於是想到axios提供了攔截器這個好東西，然後就出現了這篇文章。

2.具體需求

1. 使用者識別碼與重定向：使用Vue提供的路由導航鉤子

2. 請求資料序列化：使用axios提供的請求攔截器

3. 介面報錯資訊處理：使用axios提供的回應攔截器

##介面報錯資訊處理：使用axios提供的回應攔截器

3.簡單實作

3.1 路由導航鉤子層面鑑權與重定向的封裝

路由導航鉤子所有設定均在router/index.js，這裡是部分程式碼

import Vue from 'vue'
import Router from 'vue-router'
import { getUserData } from '@/script/localUserData'
const MyAddress = r => require.ensure([], () => r(require('@/views/MyAddress/MyAddress')), 'MyAddress')
Vue.use(Router)
const routes = [
 {
  path: '/profile/address',
  name: 'MyAddress',
  component: MyAddress,
  meta: {
   title: '我的地址',
   requireAuth: true
  }
 },
 // 更多...
]
const router = new Router({
 mode: 'history',
 routes
})

我們主要來看下面邏輯處理部分的程式碼

let indexScrollTop = 0
router.beforeEach((to, from, next) => {
 // 路由进入下一个路由对象前，判断是否需要登陆
 // 在路由meta对象中由个requireAuth字段，只要此字段为true，必须做鉴权处理
 if (to.matched.some(res => res.meta.requireAuth)) {
  // userData为存储在本地的一些用户信息
  let userData = getUserData()
  // 未登录和已经登录的处理
  // getUserData方法处理后如果userData.token没有值就是undefined，下面直接判断
  if (userData.token === undefined) {
   // 执行到此处说明没有登录，君可按需处理之后再执行如下方法去登录页面
   // 我这里没有其他处理，直接去了登录页面
   next({
    path: '/login',
    query: {
     redirect: to.path
    }
   })
  } else {
   // 执行到说明本地存储有用户信息
   // 但是用户信息是否过期还是需要验证一下滴
   let overdueTime = userData.overdueTime
   let nowTime = +new Date
   // 登陆过期和未过期
   if (nowTime > overdueTime) {
    // 登录过期的处理，君可按需处理之后再执行如下方法去登录页面
    // 我这里没有其他处理，直接去了登录页面
    next({
     path: '/login',
     query: {
      redirect: to.path
     }
    })
   } else {
    next()
   }
  }
 } else {
  next()
 }
 if (to.path !== '/') {
  indexScrollTop = document.body.scrollTop
 }
 document.title = to.meta.title || document.title
})
router.afterEach(route => {
 if (route.path !== '/') {
  document.body.scrollTop = 0
 } else {
  Vue.nextTick(() => {
   document.body.scrollTop = indexScrollTop
  })
 }
})
export default router

至此，路由鉤子層面的鑑權處理完畢，不過細心的你可能注意到：導航去登入頁面呼叫的next方法裡面有個query對象，攜帶了目標路由的位址，這是因為登入成功後我們需要重新導向到目標頁面。

3.2 對axios攔截器封裝

axios所有配置均在件script/getData.js文件，這裡是本文件公共代碼部分

"
import qs from 'qs'
import { getUserData } from '@/script/localUserData '
import router from '@/router '
import axios from 'axios'
import { AJAX_URL } from '@/config/index '
axios.defaults.baseURL = AJAX_URL
> axios请求拦截器代码
 "
/**
 * 请求拦截器，请求发送之前做些事情
 */
axios.interceptors.request.use(
 config => {
  // POST || PUT || DELETE请求时先格式化data数据
  // 这里需要引入第三方模块qs
  if (
   config.method.toLocaleUpperCase() === 'POST' ||
   config.method.toLocaleUpperCase() === 'PUT' ||
   config.method.toLocaleUpperCase() === 'DELETE'
  ) {
   config.data = qs.stringify(config.data)
  }
  // 配置Authorization参数携带用户token
  let userData = getUserData()
  if (userData.token) {
   config.headers.Authorization = userData.token
  }
  return config
 },
 error => {
  // 此处应为弹窗显示具体错误信息，因为是练手项目，劣者省略此处
  // 君可自行写 || 引入第三方UI框架
  console.error(error)
  return Promise.reject(error)
 }
)

axios回應攔截器代碼

/**
 * 响应拦截器，请求返回异常统一处理
 */
axios.interceptors.response.use(
 response => {
  // 这段代码很多场景下没用
  if (response.data && response.data.success === false) {
   // 根据实际情况的一些处理逻辑...
   return Promise.reject(response)
  }
  return response
 },
 error => {
  // 此处报错可能因素比较多
  // 1.需要授权处用户还未登录，因为路由段有验证是否登陆，此处理论上不会出现
  // 2.需要授权处用户登登录过期
  // 3.请求错误 4xx
  // 5.服务器错误 5xx
  // 关于鉴权失败，与后端约定状态码为500
  switch (error.response.status) {
   case 403:
    // 一些处理...
    break
   case 404:
    // 一些处理...
    break
   case 500:
    let userData = getUserData()
    if (userData.token === undefined) {
     // 此处为未登录处理
     // 一些处理之后...再去登录页面...
     // router.push({
     //  path: '/login'
     // })
    } else {
     let overdueTime = userData.overdueTime
     let nowTime = +new Date
     if (overdueTime && nowTime > overdueTime) {
      // 此处登录过期的处理
      // 一些处理之后...再去登录页面...
      // router.push({
      //  path: '/login'
      // })
     } else {
      // 极端情况，登录未过期，但是不知道哪儿错了
      // 按需处理吧...我暴力回到了首页
      router.push({
       path: '/'
      })
     }
    }
    break
   case 501:
    // 一些处理...
    break
   default:
    // 状态码辣么多，按需配置...
    break
  }
  return Promise.reject(error)
 }
)

我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

JS做出數組遍歷方式匯總以及效能對比

##vue select操作元件開啟

JS運算JSON陣列去重

#######

以上是封裝Vue2路由導航鉤子並在實戰中使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！