一、VUE项目与原生Javascript Js功能模块的整合
因为产品要整体做三级等保验证，而等保需要做密码安全评价（密评），最终的方案就是需要使用 Ukey 来登录管理后台，而这最终涉及在我们的VUE项目中去调用第三方 UKEY 厂商提供的JS模块包。
1. 关于 Ukey
如果之前未接触过 Ukey ，可以看看以下我整理的 Ukey 运行流程，这样对开发有很大的帮助。Ukey 就是一个U盘，里面存储了用户的身份信息，一般是身份证号和姓名，同时存储了用户的密钥私钥，只可执行和获取Ukey的基本信息，不可读取或修改其内部数据。第三方都会提供一些DEMO页面让用户测试，demo也是一个网页，在页面中可以获取用户的证书名称（就是用户的姓名），然后输入 pin码验证，pin码就是要使用这个 Ukey 所需要的密码，一般的厂商都会以用户身份证号后6位或者6个1之类的作为初始默认密码。pin验证成功之后就通过了身份认证。
2. Ukey 登录系统流程步骤整理
所以使用 Ukey 登录系统的流程整理出来就是以下几步：
- 1.先安装 Ukey 厂商提供的插件工具软件。
- 2.插上 Ukey 至USB口，打开浏览器访问目标系统。
- 3.登录界面使用JS脚本读取并加载已经识别的UKEY列表，可选择。
- 4.用户选择证书Ukey，输入对应Ukey 的pin码，点击开始验证。
- 5.pin码会被提交至本地 Ukey 的服务上进行验证
- 6.验证通过会提示成功；失败一般会提示失败次数。
- 7.有的Ukey 厂商会对失败次数做记录，失败多次会锁死Ukey。
- 8.需要注意一点是，拔出 UKEY要让当前登录用户自动退出。
UKEY的作用体现在哪呢？使用账号密码登录的话，你可以使用这个账号密码在任何电脑终端上登录，而使用 UKEY，你只能同时在一个地方登录。而且必须配合 UKEY 硬件同时使用。
3. Ukey 的js代码与项目的整合
Ukey 的js代码与项目的整合，如果原来就是纯原生的JS就相对较方便整合。使用VUE的相对麻烦，但也还好。我这里已经开发测试通过了登录页的整合。总结在vue开发中需要注意的几项。
A. Vue中调用原生的javascrip方法时总是报错 Uncaught ReferenceError: xxxxx is not defined
开始我将原生的 JS 方法写到 export default 之外，然后在 VUE 的mounted周期中调用 JS方法， Vue总是报错 Uncaught ReferenceError: xxxxx is not defined。显示这些定义的方法都没有在 VUE的作用域内。Vue要能调用原生JavaScript方法，需要确保这些方法在Vue实例的作用域内或者是在window对象上。
为什么我要在外部定义这些方法，因为这些方法里会调用第三方厂商如 xtxsync.SOF_GetVersion() 取证书的版本号、SetUserCertList 将证书列表写入等JS操作，而这些 xtxsync.js 内部的操作放在VUE里面执行会出问题，所以我后来用了一个简单的方法就是将这些涉及 xtxsync.的方法写在window对象上。
#示例如下：
window.function_name=function(){
alert("get from vue");
}上面这些function_name方法的定义代码可以写在 mounted中，在 mounted中直接调用即可。
B. UKEY证书的拔出 回调 SetOnUsbKeyChangeCallBack
我在使用第三方厂商的 SetOnUsbKeyChangeCallBack UKEY证书的拔出 回调时尝试了很多次，在登录界面可行、在登录之后的页面框架层也加载了这个拔出触发JS操作，但就是奇怪总是出现开始能检测后来又检测不了的情况，可能是我的JS有问题吧，但也没有排查出问题，这些教程我都记不得太多了，因为用户拔出主要涉及用户的本地存储sessionStorage的清理，但总是调用 VUE的 sessionStorage出现问题。记得这期间涉及了一些 this调用异常的问题，改成that有些地方可行，但有时又有些又不正常。而项目又需要马上进行验证。我后来就干脆放弃了这个尝试，使用了定时脚本来处理。
this.certs = setInterval(() => {
var certsNow = xtxsync.SOF_GetUserList();
if(this.certs!='' && certsNow != this.certsNow){
sessionStorage.clear();
window.location.href='/';
}
this.certs = certsNow;
}, 2000);这样能实现密评的需要即可。
