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