vue+axios 前端實現的經常使用攔截

1、路由攔截使用

首先在定義路由的時候就須要多添加一個自定義字段requireAuth，用於判斷該路由的訪問是否須要登陸。若是用戶已經登陸，則順利進入路由，不然就進入登陸頁面，路由配置以下：vue

const routes = [ { path: '/', name: '/', component: Index }, { path: '/repository', name: 'repository', meta: { requireAuth: true,  // 添加該字段，表示進入這個路由是須要登陸的
 }, component: Repository }, { path: '/login', name: 'login', component: Login } ];

定義完路由後，咱們主要是利用vue-router提供的鉤子函數beforeEach()對路由進行判斷：ios

router.beforeEach((to, from, next) => { if (to.meta.requireAuth) {  // 判斷該路由是否須要登陸權限
        if (store.state.token) {  // 經過vuex state獲取當前的token是否存在
 next(); } else { next({ path: '/login', query: {redirect: to.fullPath} // 將跳轉的路由path做爲參數，登陸成功後跳轉到該路由
 }) } } else { next(); } })

2、攔截器使用

要想統一處理全部http請求和響應，就得用上 axios 的攔截器。經過配置http response inteceptor，當後端接口返回401 Unauthorized（未受權），讓用戶從新登陸。vue-router

// http request 攔截器
axios.interceptors.request.use( config => { if (store.state.token) {  // 判斷是否存在token，若是存在的話，則每一個http header都加上token
            config.headers.Authorization = `token ${store.state.token}`; } return config; }, err => { return Promise.reject(err); }); // http response 攔截器
axios.interceptors.response.use( response => { return response; }, error => { if (error.response) { switch (error.response.status) { case 401: // 返回 401 清除token信息並跳轉到登陸頁面
 store.commit(types.LOGOUT); router.replace({ path: 'login', query: {redirect: router.currentRoute.fullPath} }) } } return Promise.reject(error.response.data)   // 返回接口返回的錯誤信息
    });

3、實例

/** * 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

若是你是使用了vux，那麼在main.js這樣使用：vuex

Vue.prototype.$http.interceptors.response.use()

參考地址：vue中axios解決跨域問題和攔截器使用element-ui