JS实现HTTP请求头-Basic Authorization

JavaScript018

JS实现HTTP请求头-Basic Authorization,第1张

HTTP协议中的 Authorization 请求消息头含有服务器用于验证用户代理身份的凭证,通常会在服务器返回 401 Unauthorized 状态码以及 WWW-Authenticate 消息头之后在后续请求中发送此消息头。

格式是Basic字符串+空格+ 用户名:密码 的Base64编码。

将凭证<credentials>部分进行Base64编码,然后再拼接字符串'Basic ',就可以生成基础验证方案。

因为DOMString 是16位编码的字符串,如果有字符超出了8位ASCII编码的字符范围时,在大多数的浏览器中对Unicode字符串调用 window.btoa将会造成一个 Character Out Of Range 的异常。

所以下列方法将UTF-16的 DOMStrin 转码为UTF-8的字符数组然后再编码。

将UTF-16的 DOMString 转码成UTF-8的字符串进行base64编码

使用 eoLinker 发送Basic Auth,输入用户名scar 密码123456

PS: eoLinker是一个很好用的接口管理网站,前端测试很方便

在JS Bin运行后,发现和eoLinker结果一致,成功!!

Authorization

Authentication

Javascript base64

Base64的编码与解码

Base64笔记-阮一峰老师

btoa方法

// ajax 对象

function ajaxObject() {

    var xmlHttp

    try {

        // Firefox, Opera 8.0+, Safari

        xmlHttp = new XMLHttpRequest()

        } 

    catch (e) {

        // Internet Explorer

        try {

             xmlHttp = new ActiveXObject("Msxml2.XMLHTTP")

            } catch (e) {

            try {

                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")

            } catch (e) {

             alert("您的浏览器不支持AJAX!")

             return false

            }

        }

}

    return xmlHttp

}

// ajax post请求:

function ajaxPost ( url , data , fnSucceed , fnFail , fnLoading ) {

    var ajax = ajaxObject()

    ajax.open( "post" , url , true )

    ajax.setRequestHeader( "Content-Type" , "application/x-www-form-urlencoded" )

    ajax.onreadystatechange = function () {

        if( ajax.readyState == 4 ) {

            if( ajax.status == 200 ) {

                fnSucceed( ajax.responseText )

            }

            else {

                fnFail( "HTTP请求错误!错误码:"+ajax.status )

            }

        }

        else {

            fnLoading()

        }

    }

    ajax.send( data )

}

在until文件夹下,创建request.js,request.js文件中的内容有以下几种:

①引入要调用的模块 (根据实际情况引入)

②接口调用基准路径

可以直接写到axios创建的实例对象中也可以单独赋给变量,这样是方便之后的维护

还有 请求超时 时间的参数设置    timeout : 5000    // request timeout

③请求拦截器------axios内置的一个函数

请求拦截器一般用来给请求统一携带添加请求头

首先要获取到token,如果存在vuex中就通过store获取,如果存在本地就通过localStorage.getItem('token')获取

然后判断token是否存在, 如果存在说明登陆成功了,就统一添加到请求头中,与Bearer进行拼接

如果不存在就会进入到 响应拦截器 啦,然后重新发起请求 获取token ,获取成功再进入请求拦截器....

这样封装接口的时候就不需要手动添加了!!!

④响应拦截器------axios内置的一个函数

响应拦截器一般是用来给响应结果做出动作的,例如响应状态码为 401 ,说明是 token失效问题 ,这是就要做出一系列的动作:

跳转到登录页重新登陆或者进行token的续签

方式一:跳转到登录页,并清空本地和vuex的token

方式二:token续签

续签方式1:清空vuex和本地的token,重新登陆,并且登陆后访问的页面是退出时访问的页面,需要记住路径参数

token过期了,这时还是一样 跳转到到登录页面,清空vuex和本地token ,或者项目中封装了 退出登录的函数 ,此时 调用 即可,退出登录的接口中包括了页面跳转和清空token的操作。

之后点击登录之后,页面跳转到退出时的页面 页面的路由地址我们也可以得到(调试工具或者其他地方)需要我们仔细观察呦。这是在js文件中,所以使用的是   router.currentRoute.fullPath

encodeURIComponent() 函数可把 字符串作为 URI 组件进行编码。 该方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: - _ . ! ~ * ' ( ) 。

其他字符(比如 :/?:@&=+$,# 这些用于分隔 URI 组件的标点符号),都是由一个或多个十六进制的转义序列替换的。

续签方式2:

当token失效时,接口接收到401状态码之后,自动调用接口重新获取token,并且通过vuex的mutations函数给vuex的token重新赋值,并且保存在本地一份,然后利用新的token把之前未成功的请求重新再发一次,注意要同时刷新请求头的token

⑤封装通用的接口调用方法并默认导出

方式1:配置参数时,如果请求方式是get,请求参数就用params,如果是get就用data

方式2:在request.js中封装一个通用API

之后在各个api文件中导入这个模板,直接传参即可,如下:

使用时直接导入变量名,如果其它api文件中也有相同的变量名,为了防止冲突,可以通过 as 更改接口的名称