2. 程式人生 > >Vue+axios 實現http攔截及路由攔截例項

Vue+axios 實現http攔截及路由攔截例項

阿新 • • 發佈：2018-11-10

現如今,每個前端對於Vue都不會陌生,Vue框架是如今最流行的前端框架之一,其勢頭直追react.最近我用vue做了一個專案,下面便是我從中取得的一點收穫.

基於現在用vue+webpack搭建專案的文件已經有很多了,我就不再累述了.

技術棧

  1. vue2.0
  2. vue-router
  3. axios

攔截器

首先我們要明白設定攔截器的目的是什麼,當我們需要統一處理http請求和響應時我們通過設定攔截器處理方便很多.

這個專案我引入了element ui框架,所以我是結合element中loading和message元件來處理的.我們可以單獨建立一個http的js檔案處理axios,再到main.js中引入.

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

/**

 * http配置

 */

// 引入axios以及element ui中的loading和message元件

import axios from 'axios'

import { Loading, Message } from 'element-ui'

// 超時時間

axios.defaults.timeout = 5000

// http請求攔截器

var

loadinginstace

axios.interceptors.request.use(config => {

 // element ui Loading方法

 loadinginstace = Loading.service({ fullscreen: true })

 return config

}, error => {

 loadinginstace.close()

 Message.error({

 message: '載入超時'

 })

 return Promise.reject(error)

})

// http響應攔截器

axios.interceptors.response.use(data => {// 響應成功關閉loading

 loadinginstace.close()

 return data

}, error => {

 loadinginstace.close()

 Message.error({

 message: '載入失敗'

 })

 return Promise.reject(error)

})

 

export default axios

這樣我們就統一處理了http請求和響應的攔截.當然我們可以根據具體的業務要求更改攔截中的處理.

路由攔截

我們可以通過路由攔截做什麼?我認為最主要的便是對許可權的控制,比如有的頁面需要登入了才能進入,有些頁面不同身份渲染不同.接下來簡單的講一下登入攔截.

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

import Vue from 'vue'

import Router from 'vue-router'

 

Vue.use(Router)

 

const router = new Router({

 routes: [

 {

  path: '/',

  /*

  * 按需載入

  */

  component: (resolve) => {

  require(['../components/Home'], resolve)

  }

 }, {

  path: '/record',

  name: 'record',

  component: (resolve) => {

  require(['../components/Record'], resolve)

  }

 }, {

  path: '/Register',

  name: 'Register',

  component: (resolve) => {

  require(['../components/Register'], resolve)

  }

 }, {

  path: '/Luck',

  name: 'Luck',

  // 需要登入才能進入的頁面可以增加一個meta屬性

  meta: {

  requireAuth: true

  },

  component: (resolve) => {

  require(['../components/luck28/Luck'], resolve)

  }

 }

 ]

})

// 判斷是否需要登入許可權 以及是否登入

router.beforeEach((to, from, next) => {

 if (to.matched.some(res => res.meta.requireAuth)) {// 判斷是否需要登入許可權

 if (localStorage.getItem('username')) {// 判斷是否登入

  next()

 } else {// 沒登入則跳轉到登入介面

  next({

  path: '/Register',

  query: {redirect: to.fullPath}

  })

 }

 } else {

 next()

 }

})

 

export default router

這樣就做好了登入攔截.我們只需在main.js中引入router就可以了.

實現許可權的控制我們還可以通過Vuex來實現,但是如果是小型專案就沒必要引入Vuex了

相關推薦

Vue+axios 實現http攔截及路由攔截

用戶 img clas inf vue query 都是 alt blog 在整1個小東東，改下試試， 原來的一個東東改動。 中間需要用到 用戶權限和攔截， 看了vue2的方式。 看到這文章，不錯，收藏了 http://www.cnblogs.

Vue+axios 實現http攔截及路由攔截例項

現如今,每個前端對於Vue都不會陌生,Vue框架是如今最流行的前端框架之一,其勢頭直追react.最近我用vue做了一個專案,下面便是我從中取得的一點收穫. 基於現在用vue+webpack搭建專案的文件已經有很多了,我就不再累述了. 技術棧 vue2.0 vue-route

vue-resource請求超時實現http攔截及路由攔截

  轉載自： 轉載：https://my.oschina.net/lixiaoyan/blog/1510462 vue-resource請求超時實現http攔截及路由攔截 我們可以通過路由攔截做什麼?我認為最主要的便是對許可權的控制,比如有的頁面需要登入了才能進入,有些頁面

vue+axios 前端實現登錄攔截（路由攔截、http攔截）

itl sta outer gin get alt aud 利用 業務 一、路由攔截 登錄攔截邏輯 第一步：路由攔截 首先在定義路由的時候就需要多添加一個自定義字段requireAuth，用於判斷該路由的訪問是否需要登錄。如果用戶已經登錄，則順利進入路由， 否則就進入登錄頁

vue+axios+element-ui 實現ajax請求攔截和路由攔截

原文連結 https://www.cnblogs.com/parkboyoung/p/6761863.html ajax攔截器： 結合element-ui中loading和message元件來處理的，我們可以單獨建立一個http的js檔案處理axios，再到main.js中引入，統一處理

Vue+axios實現登陸攔截，axios封裝(報錯,鑑權,跳轉,攔截,提示)

axios封裝 需求及實現 統一捕獲介面報錯 彈窗提示 報錯重定向 基礎鑑權 表單序列化 實現的功能 統一捕獲介面報錯 : 用的axios內建的攔截器 彈窗提示: 引入 Element UI的Message元件 報錯重定向: 路由鉤子

基於vue和axious的http攔截和路由攔截

一個專案學會vue全家桶+axios實現登入、攔截、登出功能，以及利用axios的http攔截器攔截請求和響應。 前言 該專案是利用了Github 提供的personal token作為登入token，通過token訪問你的Repository List。通過這個專案學習如何實現一個前端專案中所需

Vue使用Axios實現http請求以及解決跨域問題

Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。Axios的中文文件以及github地址如下： 一、安裝Axios外掛 npm install axios --save 二、在main.js中引入Axios庫

Vue之單文件組件的數據傳遞,axios請求數據及路由router

methods ken 種類型 跳轉頁面 字符 方式 沒有 ret tar 1.傳遞數據 例如,我們希望把父組件的數據傳遞給子組件. 可以通過props屬性來進行傳遞. 傳遞數據三個步驟： 步驟1:在父組件中，調用子組件的組名處，使用屬性值的方式往下傳遞數據

Java Web專案通過filter限制IP訪問及路由攔截

背景 web開發中出於安全方面的考慮，對於後臺管理專案通常會對使用者訪問做限制，常見的做法是硬體上設定白名單，過濾掉不需要的IP訪

vue+axios實現文件下載

lob wid 文件流 post請求 童鞋 inf api 文件 download 功能：點擊導出按鈕，提交請求，下載excel文件； 第一步：跟後端童鞋確認交付的接口的response header設置了 以及返回了文件流。 第二步：修改axios請求的resp

vue-router 實現導航守衛（路由衛士）

router strong class onerror api date console .org nbsp 路由跳轉前做一些驗證，比如登錄驗證，是網站中的普遍需求。 對此，vue-route 提供的 beforeRouteUpdate 可以方便地實現導航守衛（naviga

vue axios 實現上傳檔案

1 新建一個用來上傳檔案的axios，不同普通請求後臺的axios，因為上傳檔案不能手動設定請求頭      var uploadAxios = axios.create({}),       Vue.prototype.$uploadAxios = uploadAxio

vue+axios 實現Excel下載

以前寫過關於Springboot提供Excel檔案下載的部落格:https://blog.csdn.net/zc_ad/article/details/85242556 ,當點選下載的api地址時，就可以直接下載，或我們在前端頁面直接使用<a>標籤，href指向下載地址，我

vue---axios實現資料互動與跨域問題

1. 通過axios實現資料請求 vue.js預設沒有提供ajax功能的。 所以使用vue的時候，一般都會使用axios的外掛來實現ajax與後端伺服器的資料互動。 注意，axios本質上就是javascript的ajax封裝，所以會被同源策略限制。 下載地址： https://unpkg.com/axios

vue---axios實現數據交互與跨域問題

數據 本質 但是 int object request this 返回值 平臺 1. 通過axios實現數據請求 vue.js默認沒有提供ajax功能的。 所以使用vue的時候，一般都會使用axios的插件來實現ajax與後端服務器的數據交互。 註意，axios本質上就是j

vue-cli項目使用axios實現登錄攔截

XP user som ID 登錄攔截 fault enter edi axios 登錄攔截 一。路由攔截 項目中某些頁面需要用戶登錄後才可以訪問，在路由配置中添加一個字段requireAuth 在router/index.js中 const router = new R

vue-router vue-x 實現狀態改變 攔截路由

一丶首先在使用者登入前後分別給出一個狀態來標識此使用者是否登入（建議用vuex）； import Vue from ' vue ' import Vuex from ' vuex '

vue+axios 攔截器實現統一token

需求 要想統一處理所有http請求和響應，就得用上 axios 的攔截器。通過配置 http response inteceptor ，當後端介面返回 401 Unauthorized（未授權） ，讓使用者重新登入。通過這個專案學習如何實現一個前端專案中所需要的

vue中使用router全域性守衛實現頁面攔截及安全問題的一點感想

一、背景 　　在vue專案中使用vue-router做頁面跳轉時，路由的方式有兩種，一種是靜態路由，另一種是動態路由。而要實現對路由的控制需要使用vuex和router全域性守衛進行判斷攔截(安全問題文章最後討論) 二、使用場景 　　靜態路由的使用場景：在我們使用靜態路由實現頁面跳轉時，不管我們是否登入