vue+axios 前端实现的常用拦截

一、路由拦截使用

首先在定义路由的时候就需要多添加一个自定义字段requireAuth，用于判断该路由的访问是否需要登录。如果用户已经登录，则顺利进入路由，否则就进入登录页面，路由配置如下：

const routes = [
    {
        path: '/',name: '/''repository'Meta: {
            requireAuth: true,// 添加该字段，表示进入这个路由是需要登录的
        },component: Repository
    },{
        path: '/login'@H_502_25@

定义完路由后，我们主要是利用vue-router提供的钩子函数beforeEach()对路由进行判断：

router.beforeEach((to,from,next) => {
    if (to.Meta.requireAuth) {   判断该路由是否需要登录权限
        if (store.state.token) {   通过vuex state获取当前的token是否存在
            next();
        }
        else {
            next({
                path: '/login' 将跳转的路由path作为参数，登录成功后跳转到该路由
            })
        }
    }
     {
        next();
    }
})@H_502_25@

二、拦截器使用

要想统一处理所有http请求和响应，就得用上 axios 的拦截器。通过配置http response Inteceptor，当后端接口返回401 Unauthorized（未授权），让用户重新登录。

 http request 拦截器
axios.interceptors.request.use(
    config => {
         判断是否存在token，如果存在的话，则每个http header都加上token
            config.headers.Authorization = `token ${store.state.token}`;
        }
        return config;
    },err => Promise.reject(err);
    });
 
 http response 拦截器
axios.interceptors.response.use(
    response => response;
    },error =>if (error.response) {
            switch (error.response.status) {
                case 401:
                     返回 401 清除token信息并跳转到登录页面
                    store.commit(types.logoUT);
                    router.replace({
                        path: 'login'return Promise.reject(error.response.data)    返回接口返回的错误信息
    });@H_502_25@

三、实例

/**
 * 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 })
  config
},1)"> {
 loadinginstace.close()
 Message.error({
 message: '加载超时'
 })
  Promise.reject(error)
})
 http响应拦截器
axios.interceptors.response.use(data => { 响应成功关闭loading
 loadinginstace.close()
  data
},1)"> {
 loadinginstace.close()
 Message.error({
 message: '加载失败' Promise.reject(error)
})
 
export default axios@H_502_25@

如果你是使用了vux，那么在main.js这样使用：

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

参考地址：vue中axios解决跨域问题和拦截器使用

vue+axios 前端实现的常用拦截

一、路由拦截使用

二、拦截器使用

三、实例

猜你在找的Vue相关文章