在 Internet Explorer 11 中使用 reactjs 和 hellojs 的 Sharepoint 框架

Question

我有一个带有 Sharepoint 框架和 reactjs 的 Web 部件，我使用 hellojs --> hellojs

我这样做：npm install hellojs --save 并且在 edge、chrome 和 firefox 中一切正常，但我在 Internet Explorer 11 中需要这个。

我尝试在 js 和 html 中使用示例，并且在 Internet Explorer 11 中运行良好，但在我的 Sharepoint 项目中却不行。我有这个：

import * as React from 'react';
import * as hello from 'hellojs';
import { Event } from '../interfaces/Event';

export class Authentication extends React.Component<{}, { sendEvent: boolean }> {
    private refreshTokenInterval: number;

    constructor(public props, public context) {
        super(props, context);
        this.state = {
            sendEvent: true
        };
    }

    public login(network) {
        hello.init({
            aad: {
                name: 'Azure Active Directory',

                oauth: {
                    version: 2,
                    auth: 'https://login.microsoftonline.com/tenant/oauth2/v2.0/authorize',
                    grant: 'https://login.microsoftonline.com/tenant/oauth2/v2.0/token'
                },

                // Authorization scopes
                scope: {
                    // you can add as many scopes to the mapping as you want here
                    profile: 'Group.Read.All',
                    offline_access: ''
                },

                scope_delim: ' ',

                login: (p) => {
                    if (p.qs.response_type === 'code') {
                        // Let's set this to an offline access to return a refresh_token
                        p.qs.access_type = 'offline_access';
                    }
                },

                base: 'https://www.graph.microsoft.com/v1.0/',

                get: {
                    me: 'me'
                },

                xhr: (p) => {
                    if (p.method === 'post' || p.method === 'put') {
                        JSON.parse(p);
                    } else if (p.method === 'patch') {
                        hello.utils.extend(p.query, p.data);
                        p.data = null;
                    }

                    return true;
                },

                // Don't even try submitting via form.
                // This means no POST operations in <=IE9
                form: false
            }
        });
        hello.init(
            {
                aad: 'clientId'
            },
            {
                redirect_uri: 'my redirect',
                //redirect_uri: 'https://localhost:4321/temp/workbench.html',
                scope: 'Group.Read.All'
            }
        );
        // By defining response type to code, the OAuth flow that will return a refresh token to be used to refresh the access token
        // However this will require the oauth_proxy server
        hello(network).login({ display: 'none' }).then(
            (authInfo) => {
                console.log(authInfo);
                localStorage.setItem('logged', authInfo.authResponse.access_token);
                localStorage.setItem('timeToRefresh', authInfo.authResponse.expires_in.toString());
                this.props.setEvent(Event.GET_ALL_GROUPS);
                this.setState({ sendEvent: false });
                clearInterval(this.refreshTokenInterval);
                this.refreshTokenInterval = window.setInterval(() => {
                    let timeToRefresh = Number(localStorage['timeToRefresh']) - 1;
                    localStorage.setItem('timeToRefresh', timeToRefresh.toString());
                    if (timeToRefresh <= 200) {
                        localStorage.clear();
                        sessionStorage.clear();
                    }
                }, 1000);
            },
            (e) => {
                console.error('Signin error: ' + e.error.message);
            }
        );
    }

    public componentDidMount() {
        let logged = localStorage['logged'];
        if (logged === undefined) this.login('aad');
        else {
            if (this.state.sendEvent) {
                this.props.setEvent(null);
                this.props.setEvent(Event.GET_ALL_GROUPS);
            }
        }
    }

    public render() {
        return null;
    }

    /*private logout(network) {
        // Removes all sessions, need to call AAD endpoint to do full logout
        hello(network).logout({ force: true }, console.log).then(
            function() {
                console.log('Out');
            },
            function(e) {
                console.error('Sign out error: ' + e.error.message);
            }
        );
    }*/
}

我在主 class 中称这个 class:

public render(): JSX.Element {
        return (
            <div className="row">
                <div className="col-md-2" style={{ maxWidth: '250px' }}>
                    <LeftPanel setEvent={this.getEvent} />
                </div>
                <div className="col-md-10">
                    <Authentication setEvent={this.getEvent} />
                    <CenterPanel event={this.state.event} context={this.props.context} />
                </div>
            </div>
        );
    }

Internet Explorer 11 中的控制台：

Answer 1

已解决！

1. cd "folder with the package.json"
2. npm 安装url-polyfill --save
3. 导入'url-polyfill'；