這篇文章本來不打算寫的,但看到掘金某篇同樣淺顯的文章也收獲了幾百贊,頓時覺得這類文章還是被需要的,因此還是自己記錄一下.大多都是直接貼代碼吧,然后補充下里面的注釋.

image.png

路由守衛(wèi)

路由表的結(jié)構(gòu)不再贅述,值得一提就是meta的應(yīng)用和路由懶加載.meta經(jīng)常被用于存放title 是否需要緩存(keep-alive)等信息,而后者涉及到webpack打包時的分塊,在vue-router文檔里提供了官方解決辦法.
進(jìn)行路由跳轉(zhuǎn)時,最常用的是路由守衛(wèi).全局路由守衛(wèi)可以用于登錄狀態(tài)判斷等,而頁面路由守衛(wèi)常常用于判斷緩存單獨提示銷毀定時器等等.

// 動態(tài)添加路由表
const addRouterMap = function (router, next, to) {
  $form.get('menu_manage/menu_list_with_role').then(res => {
    // 深拷貝路由表
    let filteredRouterMap = clone['array'](asyncRouterMap)
    // 生成權(quán)限表
    let permissionMap = {}
    for (let menu of res.data) {
      permissionMap[+menu.menu_id] = menu.checked
    }
    store.commit('savePermissionMap', {permissionMap})
    // 根據(jù)權(quán)限表進(jìn)行路由篩選
    filteredRouterMap[0] = multiTree(filteredRouterMap[0], permissionMap)
    // 二級路由重定向
    filteredRouterMap[0].children.forEach((route, index) => {
      let children = route.children
      if (children && children.length) {
        let flag = false
        for (let sub of children) {
          sub.group && (flag = true)
        }
        if (flag) {
          route.redirect = route.path + '/' + children[0].path
        } else {
          filteredRouterMap[0].children.splice(index, 1)
        }
      }
    })
    router.addRoutes(filteredRouterMap)
    store.commit('router/saveRouterMap', {filteredRouterMap})
    store.commit('switchPermissionMapFilterStatus', {status: true}) // 標(biāo)記篩選完成
    next({path: to.path, query: to.query})
  })
}
// 路由權(quán)限驗證
const whiteList = ['Login', 'NotFound'] // 不重定向白名單

export default (router) => {
  return (to, from, next) => {
    if (store.state.token.token) { // 判斷是否有token
      if (to.path.toLowerCase() === '/login') {
        next({ path: '/' })
      } else {
        if (!store.state.isPermissionFilter) {
          addRouterMap(router, next, to)
        } else if (((to.path.indexOf(from.path) === 0) || (from.path.indexOf(to.path) === 0) || (from.name === 'clientList')) && from.path !== '/') {
          store.commit('switchSearchFlag', { res: false })
          next()
        } else {
          store.commit('switchSearchFlag', { res: true })
          next()
        }
      }
    } else {
      if (whiteList.includes(to.name)) { // 在免登錄白名單，直接進(jìn)入
        next()
      } else {
        Message({
          message: '請登錄后再進(jìn)行操作',
          type: 'error'
        })
        next('/login')
      }
    }
  }
}

以上就是后臺在登錄后的權(quán)限判斷和其他操作,github上高star的vue后臺管理系統(tǒng)對于權(quán)限管理的實現(xiàn)也和這個類似.雖然由于這個系統(tǒng)不是我在維護(hù),我并沒有太看懂上面那一坨在干嘛......但是下面的白名單等一些東西是比較普適性的.

axios配置

import $form from 'axios'
import qs from 'qs'
import router from '@/router'
import store from '@/store'
import baseApi from '@/lib/api'

// 表單格式提交
$form.defaults.timeout = 12000 // 響應(yīng)時間
$form.defaults.responseType = 'json'
$form.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8' // 配置請求頭
$form.defaults.baseURL = baseApi.BASE_API_URL // 配置接口地址
$form.defaults.transformRequest = [function (params) {
  return qs.stringify(params)
}]

function interceptorsRequestSuccess (config) {
  // store.commit('switchBtnLoading', {status: true})
  config.headers.Authorization = store.state.token || localStorage.getItem('TOKEN')
  config.headers.versions = 'multi-specification'
  config.headers.OpenId = store.state.openid || localStorage.getItem('OPENID')
  return config
}

function interceptorsRequestError (error) {
  return Promise.reject(error)
}

function interceptorsResponseSuccess (response) {
  // store.commit('switchBtnLoading', {status: false})
  return Promise.resolve(response.data)
}

function interceptorsResponseError (error) {
  let msg
  // store.commit('switchBtnLoading', {status: false})
  if (error.response && error.response.status === 401) {
    localStorage.removeItem('OPENID')
    store.commit('removeToken')
    window.location.href = baseApi.WX_AUTH_URL
    // router.push({ name: 'login' })
    return
  } else if (error.response && error.response.status === 402) {
    return router.push({name: 'login'})
  } else {
    if (error.response && error.response.data && error.response.data.tips) {
      msg = error.response.data.tips
    } else {
      msg = '請求失敗'
    }
    // Message({
    //   message: msg,
    //   type: 'error'
    // })
  }
  return Promise.reject(error.response && (error.response.data || msg))
}

$form.interceptors.request.use(interceptorsRequestSuccess, interceptorsRequestError)
$form.interceptors.response.use(interceptorsResponseSuccess, interceptorsResponseError)

// json格式提交
let $json = $form.create({
  baseURL: baseApi.BASE_API_URL, // 配置接口地址
  headers: {
    post: {
      'Content-Type': 'application/json;charset=UTF-8'
    }
  },
  transformRequest: [function (params) {
    return JSON.stringify(params)
  }]
})

$json.interceptors.request.use(interceptorsRequestSuccess, interceptorsRequestError)
$json.interceptors.response.use(interceptorsResponseSuccess, interceptorsResponseError)

const axios = {}
axios.install = function (Vue, options = {}) {
  Vue.prototype.$http = $form
  Vue.prototype.$json = $json
  Vue.prototype.$baseUrl = baseApi
}

export default axios
export {$form, $json}

以上算是很普遍的一個axios配置了,對于超時時間接口返回類型等進(jìn)行了配置,用qs對其序列化.然后就是對請求返回攔截后進(jìn)行處理,比如

請求成功時,從store或者本地拿到token配置在請求頭里,這里因為是微信公眾號項目所以還拿了個openid.
返回報錯后,如果401則移除token,跳轉(zhuǎn)微信授權(quán)頁,以及其他一些報錯信息.
請求失敗和返回成功都正常處理.
然后為了方便使用,直接將這兩種請求格式綁在了vue實例的原型鏈上.我知道不應(yīng)該往原型鏈上塞東西,但是這樣真的方便.......

跳轉(zhuǎn)歷史頁面

因為我們往往是因為沒有權(quán)限才從其他頁面跳到登錄頁的,所以我們在登錄后肯定不是想看到"我的中心"這些鬼玩意,這就希望我們跳回之前的頁面了.其他頁面也往往會有類似的需求,比如從商品列表跳到商品詳情,然后再跳轉(zhuǎn)回去時希望能夠記住高度啊緩存頁面之類的.那么下面代碼可以解決問題.

    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>

// 這是寫在app.js里的,配合之前提到的meta信息來決定緩存.緩存又涉及到生命周期鉤子比如activated等,我直接引用另外一篇文章,講得更清晰.

// 將keepAlive的界面高度存儲在倉庫
function savePageScrollTop (name, height) {
  store.commit('setFaceHeight', {key: name, value: height})
}

// 存在state 移到指定位置（異步操作）
function returnPage (ev) {
  // location.hash則可以用來獲取或設(shè)置頁面的標(biāo)簽值
  ev.state && setTimeout(() => {
    window.scrollTo(0, store.state.faceHeight[location.hash.slice(1)])
  }, 0)
}

// 當(dāng)URL的片段標(biāo)識符更改時,將觸發(fā) hashchange 事件 (跟在#符號后面的URL部分,包括#符號)
window.addEventListener('hashchange', function () {
  // 調(diào)用history.pushState()或history.replaceState()不會觸發(fā)popstate事件瓦灶。只有在做出瀏覽器動作時示罗，才會觸發(fā)該事件
  this.history.replaceState('hasHash', '', '')
}, false)

// 當(dāng)活動歷史記錄條目更改時,將觸發(fā)popstate事件 (監(jiān)聽hashchange事件灼卢， 為當(dāng)前導(dǎo)航頁附加一個標(biāo)簽砖茸， 存在state 就發(fā)生scrollTo 移動欺冀。)
window.addEventListener('popstate', returnPage, false)

router.beforeEach((to, from, next) => {
  // 如果滿足keepAlive執(zhí)行回調(diào)
  if (from.meta.keepAlive) {
    savePageScrollTop(from.path, window.scrollY)
  }
  document.title = to.meta.title || ''
  next()
})

這是掘金上別人的文章vue中前進(jìn)刷新蹄葱、后退緩存用戶瀏覽數(shù)據(jù)和瀏覽位置的實踐

vue的登錄相關(guān)(路由和axios)

vue的登錄相關(guān)(路由和axios)

路由守衛(wèi)

axios配置

跳轉(zhuǎn)歷史頁面