前端开发Vue拦截器的一次实践

前端常用后台开发库
android开发前端后台
后台与前端开发

起因

最近在做一个项目前端框架使用的是vue,项目接近尾声的时候发现需要增加一个对所有的http请求过滤的功能,所有的请求需要加上token再发送给服务器,服务器根据token判断用户身份是否有效,响应也需要过滤,判断是否授权,进行统一处理。经过调研发现,很多大佬推荐了vue-resource的interceptors拦截器,但是由于vue的作者尤雨溪已经声明不再对vue-resource进行维护,建议大家使用axios,所以果断pass掉了这个方法。然后发现,axios提供了interceptors关键字实现拦截器的功能,下面就详细说明拦截器的实现。

第一步

在阅读相关资料的时候,有两种方法可以实现拦截器,设置配置文件和重新封装axios,在尝试第一种方法时会出现了无法解决的问题,无果,故采用了重新封装axios的方法,首先在项目文件下新建utils文件夹,在该文件夹下新建文件httpAxios.js

javascript 代码

├── src
| ├──example.vue
    | └──utils
    | ├──httpAxios.js

第二步

http请求拦截器,首先对http的请求进行拦截,将所有的http请求报文的header加上Authorization字段,内容为token,token之前通过vuex保存在store中。代码如下:

javascript 代码

// http request 拦截器
axios.interceptors.request.use(
    (config) => {
        if (store.state.token) {
            config.headers.Authorization = `${store.state.token}` // token保存在store中
        }
        return config
    },
    (err) => {
        return Promise.reject(err)
    },
)

第三步

http响应拦截器,对所有response进行判断,401状态码表示未授权,代码如下:

javascript 代码

// http response 拦截器
axios.interceptors.response.use(
    (response) => {
        return response
    },
    (error) => {
        if (error.response) {
            switch (error.response.status) {
                case 401:
                    router.replace({
                        path: ‘/login’,
                        query: { redirect: router.currentRoute.fullPath },
                    })
            }
        }
        return Promise.reject(error.response.data)
    },
)

不过我司的授权并不是经过浏览器实现的,是通过约定好的错误码来表示用户登录失效,所以我并没有在error中进行处理,而是在response中判断错误码来处理的。
最后整个httpAxios.js文件的内容是:

javascript 代码

import Vue from ‘vue’
import axios from ‘axios’
import store from ‘../store/’
// 默认配置
axios.defaults.baseURL = ‘https://www.rokub.com
axios.defaults.headers.post[‘Content-Type’] = ‘application/json’
export const request = (config) => {
    return axios(config)
}
// http request 拦截器
axios.interceptors.request.use(
    (config) => {
        if (store.state.token) {
            config.headers.Authorization = `${store.state.token}` // token保存在store中
        }
        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:
                    router.replace({
                        path: ‘/login’,
                        query: { redirect: router.currentRoute.fullPath },
                    })
            }
        }
        return Promise.reject(error.response.data)
    },
)

第四步

既然重新封装了axios,那么使用方法当然会有一些变化,下面举例说明使用方法。如果要在example.vue中使用该插件,那么example.vue文件中应该这样写:

javascript 代码

import { request } from ‘/utils/httpAxios.js
request({
    method: ‘post’,
    url: ”,
    data: {},
})
    .then(function(response) {
        //处理成功的请求
    })
    .catch(function(error) {
        sonsole.log(error)
    })

那么,http拦截器就完工了,可以愉快地使用了

前端与后台分开开发
利用前端和后台进行开发
web前端开发会不会涉及后台
» 本文来自:前端开发者 » 《前端开发Vue拦截器的一次实践》
» 本文链接地址:https://www.rokub.com/8055.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!