ионные иконки не отображаются на ipad / edge - PullRequest
Новая
       21

ионные иконки не отображаются на ipad / edge

0 голосов
/ 22 ноября 2018

У меня есть компонент stenciljs, развернутый на сервере nginx за службой аутентификации.Чтобы получить что-либо, запрос должен включать cookie, содержащий access_token.Компонент работает без проблем на устройствах с Android и Chrome / Firfox / IE11 / на настольных устройствах.проблема с Microsoft Edge и на Ipad (любой навигатор), и это связано с тем, что браузер не отправляет куки на сервер.Любой намек?

header.tsx 

import { Component, Prop, State, Element } from '@stencil/core';
@Component({
  tag: 'pm-header',
  styleUrl: 'pm-header.scss',
  shadow: true
})
export class PmHeader {

...

  render() {
    return (
      <nav>
        <ul>
          <li id="menu-icon" class="left menu-icon"
            onClick={() => this.toggleFocus('menu-icon')} >
            <a>
              <ion-icon name="md-apps"></ion-icon>
            </a>
          </li>
          <li id="user-icon" class="right menu-icon"
            onClick={() => this.toggleFocus('user-icon')} >
            <a>
              <ion-icon name="md-contact"></ion-icon>
            </a>
          </li>
        </ul>
      </nav>
    );
  }
}

PS: я использую stencil / core v0.15.2

1 Ответ

0 голосов
/ 23 ноября 2018

Так что после некоторого копания выяснилось, что проблема с внедрением ионов.Они получают svgs без отправки учетных данных, которые приводят к аутентифицированному запросу.Конечно, некоторые навигаторы, такие как Chrome, Firefox и даже IE11, могут отправлять куки, даже если явно не указано, что они должны.В любом случае, чтобы решить эту проблему, мне нужно было создать файл сценария, который будет запускаться после сборки.Этот сценарий добавляет учетные данные: параметр «include» для вызова выборки, чтобы файл cookie отправлялся.

fix-icons-script.js 

/** 
 * Workaround to fix this ion-icons bug https://github.com/ionic-team/ionicons/issues/640
 * To be removed when this bug is fixed
 */
const fs = require('fs');
const workDir = 'dist/component-dir';

fs.readdir(workDir, function(err, items) {
  if (err) { return console.log(err); }

  for (var i=0; i<items.length; i++) {
    if (items[i].endsWith('.entry.js')) {
      insertString(workDir + '/' + items[i], '"force-cache"', ',credentials:"include"');
    }
  }
});

function insertString(file, searchValue, insertValue){
  fs.readFile(file, 'utf8', function (err, content) {
    if (err) { return console.log(err); }

    let newContent = content.substr(0, content.indexOf(searchValue) + searchValue.length);
    content = content.substr(newContent.length, content.length); 
    newContent += insertValue + content;

    fs.writeFile(file, newContent, function (err) {
      if (err) { return console.log(err); }
      console.log('Successfully rewrote ' + file);
    });
  });
}
...