问题描述
当我们用ArcGIS JS API(无论3.X还是4.X版本)去加载Portal for ArcGIS中的服务或者GP工具等资源时,如果该资源的权限不是公共的,在我们的前端界面就一直会有一个弹窗,提示我们输入用户名/密码,如下图所示:
解决方法
其实这问题就是由权限问题引起,解决此问题的核心就是解决你要加载引用的这个服务或者GP工具等资源的权限即可,有两种有效的方法:
1、修改此数据资源的权限(最简单、但不推荐)
既然是由资源自身的权限问题引起的,那我们只需要修改它的权限就可以啊,没错,确实是这样。
我们在Portal里找到你要引用的资源,然后点击它后面的权限图标,将它的权限修改为“公共”即可,如下图所示:
经过上图的操作,我们的数据资源权限已经变成了公共了,这时候你再去刷新前端页面,烦人的小弹窗已经不见了。但是,更烦人的问题来了,客户会问你,你这样子将我们的数据相当于暴露了啊,这个方法我可接受不了。OK,那我们找找另外的方法。
2、注册token(代码层面解决,极力推荐)
既然我们直接将要引用的数据资源权限修改为“公共”的方法有人接受不了,那我们就不动它的权限,我们发挥码奴自身的优良传统,自己在代码层面解决。
然后查阅JS API发现,官网已经提供了这样的接口,我们只需要调用Portal的REST接口生成token,然后调用我们JS API官网提供的注册token的接口将我们生成的token注册了,那接下来你想加载引入多少个私有权限的资源都没有问题,具体操作如下:
2.1 调用Portal的REST接口来生成token,代码如下:
const _self = this;
const option = {
url: gConfig.arcgis_jsapi_hosturl + 'init.js',
css: gConfig.arcgis_jsapi_hosturl + 'esri/themes/light/main.css',
};
loadModules([
'esri/config',
], option)
.then(([esriConfig]) => {
esriConfig.portalUrl = gConfig.portal_arcgis_hosturl + 'arcgis'; //配置portal
// 注册token
let portalToken = null;
const params = {
'username': gConfig.portal_username,
'password': gConfig.portal_pwd,
'referer': window.location.hostname,
'f': 'json',
};
axios({
method: 'post',
url: gConfig.portal_arcgis_hosturl + 'arcgis/sharing/rest/generateToken',
data: qs.stringify(params),
}).then( function(response) {
portalToken = response.data.token; //成功返回的portal
}).catch(function(error) {
console.log(error);
});
}).catch((err) => {
_self.$message('底图创建失败,' + err);
});
2.2 调用“esri/identity/IdentityManager”接口去注册token,便于后续代码调用私有的服务资源等,代码如下:
const _self = this;
const option = {
url: gConfig.arcgis_jsapi_hosturl + 'init.js',
css: gConfig.arcgis_jsapi_hosturl + 'esri/themes/light/main.css',
};
loadModules([
'esri/config',
'esri/identity/IdentityManager',
], option)
.then(([esriConfig, IdentityManager]) => {
esriConfig.portalUrl = gConfig.portal_arcgis_hosturl + 'arcgis';
// 注册token
let portalToken = null;
const params = {
'username': gConfig.portal_username,
'password': gConfig.portal_pwd,
'referer': window.location.hostname,
'f': 'json',
};
axios({
method: 'post',
url: gConfig.portal_arcgis_hosturl + 'arcgis/sharing/rest/generateToken',
data: qs.stringify(params),
}).then( function(response) {
portalToken = response.data.token;
IdentityManager.registerToken({ //注册生成的token
server: gConfig.portal_arcgis_hosturl + 'arcgis/sharing/rest',
token: portalToken,
});
}).catch(function(error) {
console.log(error);
});
}).catch((err) => {
_self.$message('底图创建失败,' + err);
});
2.3 token生成了,然后也注册了,接下来我们就可以加载我们自己想要加载的一些资源啦,具体实例代码如下所示:
// 创建底图
_createMap: function(nodeid) {
const _self = this;
const option = {
url: gConfig.arcgis_jsapi_hosturl + 'init.js',
css: gConfig.arcgis_jsapi_hosturl + 'esri/themes/light/main.css',
};
loadModules(['esri/WebMap',
'esri/views/MapView',
'esri/config',
'esri/identity/IdentityManager',
'esri/widgets/ScaleBar'], option)
.then(([WebMap, MapView, esriConfig, IdentityManager, ScaleBar]) => {
esriConfig.portalUrl = gConfig.portal_arcgis_hosturl + 'arcgis';
// 注册token
let portalToken = null;
const params = {
'username': gConfig.portal_username,
'password': gConfig.portal_pwd,
'referer': window.location.hostname,
'f': 'json',
};
axios({
method: 'post',
url: gConfig.portal_arcgis_hosturl + 'arcgis/sharing/rest/generateToken',
data: qs.stringify(params),
}).then( function(response) {
portalToken = response.data.token;
IdentityManager.registerToken({
server: gConfig.portal_arcgis_hosturl + 'arcgis/sharing/rest',
token: portalToken,
});
}).catch(function(error) {
console.log(error);
});
//创建地图
const webmap = new WebMap({
portalItem: {
// autocasts as new PortalItem()
id: gConfig.largeScreenWebMapID,
},
});
const view = new MapView({
container: nodeid,
map: webmap,
zoom: _self.mapviewLevel,
center: [102.714408, 25.043706],
});
}).catch((err) => {
_self.$message('底图创建失败,' + err);
});
},