ArcGIS JS API加载Portal中的服务或资源时，一直弹窗提示输入用户名/密码的问题

偏执的太偏执、 2023-06-26 10:57 5阅读 0赞

**问题描述**

当我们用ArcGIS JS API（无论3.X还是4.X版本）去加载Portal for ArcGIS中的服务或者GP工具等资源时，如果该资源的权限不是公共的，在我们的前端界面就一直会有一个弹窗，提示我们输入用户名/密码，如下图所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly94dXF3YmxvZy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70][]

**解决方法**

其实这问题就是由权限问题引起，解决此问题的核心就是解决你要加载引用的这个服务或者GP工具等资源的权限即可，有两种有效的方法：

1、修改此数据资源的权限（最简单、但不推荐）

既然是由资源自身的权限问题引起的，那我们只需要修改它的权限就可以啊，没错，确实是这样。

我们在Portal里找到你要引用的资源，然后点击它后面的权限图标，将它的权限修改为“公共”即可，如下图所示：

![20191231164611361.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly94dXF3YmxvZy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 1][]

经过上图的操作，我们的数据资源权限已经变成了公共了，这时候你再去刷新前端页面，烦人的小弹窗已经不见了。但是，更烦人的问题来了，客户会问你，你这样子将我们的数据相当于暴露了啊，这个方法我可接受不了。OK，那我们找找另外的方法。

2、注册token（代码层面解决，极力推荐）

既然我们直接将要引用的数据资源权限修改为“公共”的方法有人接受不了，那我们就不动它的权限，我们发挥码奴自身的优良传统，自己在代码层面解决。

然后查阅JS API发现，官网已经提供了这样的接口，我们只需要调用Portal的REST接口生成token，然后调用我们JS API官网提供的注册token的接口将我们生成的token注册了，那接下来你想加载引入多少个私有权限的资源都没有问题，具体操作如下：

2.1 调用Portal的REST接口来生成token，代码如下：

2.2 调用“esri/identity/IdentityManager”接口去注册token，便于后续代码调用私有的服务资源等，代码如下：

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);
                    });
            },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly94dXF3YmxvZy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191231164545759.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly94dXF3YmxvZy5ibG9nLmNzZG4ubmV0,size_16,color_FFFFFF,t_70
[20191231164611361.png]: https://img-blog.csdnimg.cn/20191231164611361.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly94dXF3YmxvZy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191231164622644.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly94dXF3YmxvZy5ibG9nLmNzZG4ubmV0,size_16,color_FFFFFF,t_70