版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wzl19870309/article/details/70612321
今天遇到很崩溃是的事情,关于angularjs中的图形验证码。直接简述问题
开始的写法:
<span>
<img id="imgVerify" src="/VerifyImage/gen" alt="看不清?点击更换" onclick="this.src = this.src.substr(0,this.src.lastIndexOf('?')==-1?this.src.length:this.src.lastIndexOf('?')) + '?' + Math.random()" style="vertical-align:middle;" />
<span class="glyphicon glyphicon-refresh" ng-click="vm.refresh()"></span>
<label ng-click="vm.refresh()">点击刷新</label>
</span>
controller:
function refresh() {
angular.element('#imgVerify').click();
}
结果测试发现:
用户正常登录没有问题,但logout(退出)时,验证码显示的是首次进入这个页面时src获取到的验证码,这样造成用户再次登录报“验证码错误”。
尝试的解决办法有:
1、监听用户的登录状态,结果发现不起作用
$scope.$watch(function () {
return Principal.isAuthenticated();
},function () {
vm.refresh();
})
最后发现在用户退出系统时,登录页还没加载,就已经触发了vm.refresh(),所以refresh没有起作用。
经请教朋友,最终的解决办法是
1、将src改为ng-src,这样保证了在页面加载完成之后,再去解析ng-src绑定的值。
2、将ng-src的值动态化,即不管第一次还是后边哪一次,请求路径都不同。
代码如下:
<span>
<img id="imgVerify" ng-src="{{vm.regUrl}}" alt="看不清?点击更换" style="vertical-align:middle;" /> <span class="glyphicon glyphicon-refresh" ng-click="vm.refresh()"></span>
<label ng-click="vm.refresh()">点击刷新</label>
</span>
vm.regUrl = "/VerifyImage/gen?" + Math.random();
function refresh() {
vm.regUrl = "/VerifyImage/gen?" + Math.random();
}