项目中关于登录，缓存，重定向，事件监听 的问题

Q1. 未登录的跳转，无权限的跳转，统一由后端判断，避免出现几秒的白屏现象。但是有些情况，需要前端来跳转。

（1）xhr/test/1.json 是ajax请求，后端只能返回code，前端跳转

（2）上传后导入文件的，form请求，前端自己跳转。

（3）excel导出的window.open和location.href ，后端重定向

（4）浏览器输入网址的，后端重定向

Q2. 登录超时退出，却可以点击导入操作：
（1）刷新页面，给后端请求是url请求，后端可以重定向。
（2）但是点击页面上按钮，发的就是ajax请求，不能重定向，只能后端返回code,前端这边判断，然后加上跳转。可在ajax请求定义的地方，统一加上判断。
（3）虽然在common.js中对ajax请求的401和403有进行跳转，但是文件上传这个组件用的是form请求，不走那边的流程，所以要单独加上跳转。

$.ajax({
type: type,
url: this.appendURL(url, { rnd: Date.now() }),
data: params,
contentType: contentType,
dataType: 'json',
success: (function (res) {
if (res.code == "200") {
if (cache) {
res.cacheTime = Date.now();
res.originUrl = url;
this.ajaxCache.put(cacheKey, res);
}
defer.resolve(res.data);
} else if (res.code === "401") {
$window.location.href = $window.location.protocol + "//" + $window.location.host + '/login';
// $window.location.reload();
} else if (res.code === "403") {
$window.location.href = $window.location.protocol + "//" + $window.location.host + '/noPermission?rnd='+new Date().getTime();
// $window.location.reload();
} else {
defer.reject(res);
}
}).bind(this),
beforeSend: function(xhr) {
xhr.setRequestHeader("X-HTTP-Method-Override", typeTmp);
},
error: (function (request, error, o) {
defer.reject(request, error, o);
}).bind(this)
});
找到上传完成，开始导入的地方，对code判断，是401就加上跳转：
$window.location.href=$window.location.protocol + "//" + $window.location.host + '/login';
具体可以见Q4中的controller中代码。

Q3. 一个有权限的人成功登录并退出，然后一个没权限的人再去登录，应该跳到无权限页，但是却跳到了无权限页和订单页的结合体上面：
cache的问题：
在login.js的callback中，没有对index加时间参数的时候，因为本地有index的缓存，就不向后端请求index页面了，他就没办法拦截请求重定向了。而前端也会因为本地有index页，走订单页发ajax请求这个流程了，而ajax请求，对后端重定向到html的结果无法处理，所以只能让后端返回code
，前端这边判断后跳转。

 
后面我这样设置了meta,
也看到了index.html没有走cache。为什么那里面还是会走订单页呢？
          
<metahttp-equiv="Cache-Control" content="no-cache, no-store,must-revalidate">

<metahttp-equiv="Pragma" content="no-cache">

<metahttp-equiv="Expires" content="0">

  
因为index页是html写的，order页是js写的，给index头部加不缓存，order页却有缓存，因为order页用templateUrl设置会去查缓存。order页加rnd，是在路由点击的时候，页面上信息会刷新。

 
用template设置，是按字符串加载，就不走cache了。
template:
require('./list1/list1.html')
templateUrl会走cache，加了rnd也不行,因为order.html是js生成的，所以禁用缓存这个还是要在index.html
templateUrl:
"views/order.html",

Q4. 文件上传失败，卡死在导入提示弹窗98%上面。
html中导入按钮：
<sharkfileupload class="btn btn-default pull-right" url="'xhr/v1/files'" accept="'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'"
autoupload="true" on-selected="selectedImportFile" on-uploaded="importFileUploaded" on-failed="onFailed">
导入
</sharkfileupload>

controller中导入文件的逻辑：
// 选中待导入文件时，打开进度条弹窗
$scope.selectedImportFile = function () {
// 打开进度条弹窗
var modalInstance = Sharkmodal.open({
templateUrl: '/views/order/import-progress-bar.html',
controller: 'importProgressBarCtrl',
backdrop: 'static'
});
// console.log(modalInstance);
modalInstance.then(function () { }, function () { });
};

$scope.onFailed = function (file, error) {
$timeout(function () {
$rootScope.$broadcast('fileUpload'); //监听导入事件
});
console.log("文件上传失败");
openAlertDialog({
content: '网络问题，导入失败！'
});
};
// 待导入文件上传到服务器完成后，进行导入操作
$scope.importFileUploaded = function (file, res) {
// 因为上传导入文件控件用的form请求，不走common.js中的ajax那边，所以那边进行的重定向对这个导入操作不生效。所以此处要单独进行一次判断。
if (res.code === "401") {
$window.location.href = $window.location.protocol + "//" + $window.location.host + '/login';
return;
}
var fileKey = res && res.data && res.data.fileKey;
// 进行导入操作
if (fileKey) {
OrdersService.importOrders(fileKey).then(function (res) {
// 触发导入完成事件
$rootScope.$broadcast('excelImported');
// 导入成功后请求订单列表和订单数量信息
openAlertDialog({
content: '订单导入成功'
});
resetPagination();
getOrdersInfo();
}, function (res, error) {
var params = {};
// http错误
if (res.readyState) {
params.content = '网络问题，导入失败！';
} else if (res.code == 400) { // 后端给的错误及可下载文件
params.content = '订单数据有误，请下载标注版Excel核对后再次导入';
params.btnText = '下载Excel';
} else { // 后端返回错误
params.content = '服务器问题，导入失败！';
}
$rootScope.$broadcast('excelImported', true);
openAlertDialog(params, function () {
var fileKey = res && res.data && res.data.fileKey;
var fileName = res && res.data && res.data.fileName;
$scope.downloadFile(fileKey, fileName);
})
});
}
};

进度条controller中对导入事件的监听：
// 监听导入失败事件
$rootScope.$on('fileUpload', function (e) {
modalInstance && modalInstance.close();
modalInstance = null;
});

// 监听是否已经导入成功
$rootScope.$on('excelImported', function (e) {

modalInstance && modalInstance.close();
modalInstance = null;
});


在html中，导入组件依赖3个函数，一个是选择文件，一个是上传失败处理，一个是上传成功后的导入。出现问题，就去看这3个函数。
出了两个问题:
(1)文件上传成功，但是登录超时却依然可以导入。就是上面说的的Q2。后面加上code的401判断，前端跳转就可以了。$rootScope.$broadcast('fileUpload');
(2)nos上还没有开通权限，导致文件上传失败，但是却卡死在导入提示上，也就是Q4。在导入失败的函数里面加上对导入失败的监听$rootScope.$on，并在导单提示的controller里，监听到导入失败后，关闭弹窗就可以了。