Why OpenLayers v6 can not show layers when they secured by GeoServer 2.17.2 GeoFence extension?

I have two workspaces in GeoServer and two different users in GeoServer. For each user I created a rule in GeoServer by GeoFence Extension, each user must be see and access to only own layers are inside own workspace, that allowed by GeoFence rule, however if I set GeoFence like below images OpenLayers can show layers but each user can see content of another user’s worksapce also.

I’d expect user 5f30ee36… can see only content of h0BUjvHBeM workspace, whereas it can see "Emeni" layers that is belong to j0BV2EjWBs workspace for user 5f5cd8…
However I can fix this problem by uncheck "Use GeoServer roles to geo authorization" and each user able to see only own layers are inside own workspaces, But my problem will happen after this step, "OpenLayers can not show layers!" but I can get link of layers! name of them and even see them in my browser (outside OpenLayers)"

My axios code is here

sysinfo: Os:Debian 10 x64, Openlayers V6, GeoServer 2.17.2, GeoFence 2.17.x,

my geoserver log

imageLoadFunction: function(image, src) {
  var xhr = new XMLHttpRequest();
  xhr.responseType = 'blob';
  xhr.open('GET', src);
  xhr.setRequestHeader('Authorization', 'Basic ' + window.btoa(username + ':' + password));
  xhr.onload = function() {
    var objectURL = URL.createObjectURL(xhr.response);
    image.getImage().onload = function() {
      URL.revokeObjectURL(objectURL);
    };
    image.getImage().src = objectURL;
  };
  xhr.send();
}