Vue实现EasyNVR登录鉴权

其实easyNVR的登录鉴权是比较简单的那种，奈何他的文档写的并不完善，有很多点都没有提到，我也是在询问了客服好多次后一路踩坑才成功的。

首先我们讲一下easyNVR的登录流程，和一般的登录（后端发送token给前端，前端在后续的请求header中携带token来进行访问）不同，当你的机器（ip）访问了easyNVR的api后，easyNVR会给你分配唯一的token，这个token存放在response里header中的set-Cookie属性中，而当你通过访问login接口完成登录验证后，easyNVR服务端会将该token注册为已登录状态，从而使之后的请求可以正常完成。

response的header信息

这里的登录鉴权首先要开启下述两条规则

; 直播页面鉴权, 即是否要求登录后观看视频(0-关闭, 1-开启)
live_streaming_auth=1

; 是否需要接口鉴权(0-关闭, 1-开启)
api_auth=1

当开启这两条规则后，只要未经登录访问接口就会报错，此时已经可以在response的header中看到给你分配的token了

401 Unauthorized

于是我们先请求/api/v1/login接口，参数里带上用户名和md5加密过的密码就可以了，如果请求通过的话会返回如下信息：

{
    "EasyDarwin": {
        "Header": {
            "CSeq": "1",
            "Version": "v1",
            "MessageType": "MSG_SC_SERVER_LOGIN_ACK",
            "ErrorNum": "200",
            "ErrorString": "Success OK"
        },
        "Body": {
            "Token": "CdgNFWCig",
            "TokenTimeout": 86400
        }
    }
}

接下来我们处理下跨域问题，只要在请求里开启withCredentials和crossDomain就可以了。vue中的实现方式有如下两种：

方案1 在每次请求中都设置上述两个属性:

// axios绑定在全局的 $http 变量下
this.$http.get('http://localhost:10800/api/v1/login', {
    params: {
      username: 'admin',
      password: '210cf7aa5e2682c9c9d4511f88fe2789' //admin with md5
    },
  withCredentials: true,
  crossDomain: true
}).then(res => {
    ...
})

方案2（推荐） 在axios的requests拦截器里进行配置

axios.interceptors.request.use(axiosConfig => {
    ...
    axiosConfig.withCredentials = true
    axiosConfig.crossDomain = true
    
    return axiosConfig
})

这样就可以和api进行互动啦。

这里还有几个问题要提一下，easyNVR的api操作是不允许在请求的header中携带任何自定义参数的，如下图，蓝框圈出来的就是header中的自定义参数名

header中存在自定义参数引发跨域错误

还有个问题就是还是刚才提到的跨域参数是每次请求都要带的，如果之后的请求里没有带的话，依旧会报401鉴权失败，所以推荐配置在requests拦截器里一劳永逸。

鉴权失败

参考资料 EasyNVR 如何实现跨域鉴权