Angular Lepton [403] You are not authorized #9057

464199480 created 5 days ago

Cli command
Cli command abp new Acme.BookStore -u angular -t app-pro -theme lepton

environment.ts

const oAuthConfig = {
  issuer: 'https://localhost:44311/',
  redirectUri: baseUrl,
  clientId: 'BookStore_App',
  responseType: 'password', 
  scope: 'offline_access BookStore',
  requireHttps: true,
  impersonation: {
    userImpersonation: true,
    tenantImpersonation: true,
  },
};

Go to http://localhost:4200/openiddict/Applications, then press F5 to refresh. You will encounter a 403 error.

maliming created 4 days ago

Support Team Fullstack Developer

Can you share the logs.txt?

liming.ma@volosoft.com

464199480 created 3 days ago

Hi @maliming
It has been sent.

maliming created 3 days ago

Support Team Fullstack Developer

Thanks.

All the API requests were successful. I will forward this to our Angularar team.

464199480 created 2 days ago

Hi @sumeyye.kurtulus.

Any temporary solution?

sumeyye.kurtulus created 2 days ago

Support Team Angular Expert

Hello, thank you for your patience, and we sincerely apologize for the delayed response. We appreciate you reporting this issue. The problem will be addressed in our upcoming release. In the meantime, you can work around it by overriding the related guard as follows:

// new-permission.guard.ts
import {
  RoutesService,
  AuthService,
  PermissionService,
  HttpErrorReporterService,
  findRoute,
  getRoutePath,
  ConfigStateService,
} from '@abp/ng.core';
import { HttpErrorResponse } from '@angular/common/http';
import { inject } from '@angular/core';
import {
  CanActivateFn,
  ActivatedRouteSnapshot,
  RouterStateSnapshot,
  Router,
} from '@angular/router';
import { of, switchMap, take, tap, distinctUntilChanged, filter, map } from 'rxjs';

export const newPermissionGuard: CanActivateFn = (
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
) => {
  const router = inject(Router);
  const routesService = inject(RoutesService);
  const authService = inject(AuthService);
  const permissionService = inject(PermissionService);
  const configState = inject(ConfigStateService);
  const httpErrorReporter = inject(HttpErrorReporterService);

  let { requiredPolicy } = route.data || {};

  if (!requiredPolicy) {
    const routeFound = findRoute(routesService, getRoutePath(router, state.url));
    requiredPolicy = routeFound?.requiredPolicy;
  }

  if (!requiredPolicy) {
    return of(true);
  }

  return configState.getAll$().pipe(
    map(config => config.auth?.grantedPolicies),
    distinctUntilChanged(),
    filter(Boolean),
    take(1),
    switchMap(() => permissionService.getGrantedPolicy$(requiredPolicy)),
    tap(access => {
      if (!access && authService.isAuthenticated) {
        httpErrorReporter.reportError({ status: 403 } as HttpErrorResponse);
      }
    })
  );
};

Inside the app-routing.module

const routes: Routes = [
...
  {
    path: 'openiddict',
    loadChildren: () =>
      import('@volo/abp.ng.openiddictpro').then(m => m.OpeniddictproModule.forLazy()),
    canActivate: [newPermissionGuard],
  },
...
];

Additionally, we will be processing a refund for your ticket. Please don't hesitate to reach out if you need any further assistance.

464199480 created a day ago

Hi @sumeyye.kurtulus

This temporary solution will only work for one module; it will need to be used by every module to solve the entire issue.

Does the module need to refer to permission.guard.ts separately in the next version?

I found a few addresses with the same situation

http://localhost:4200/audit-logs
http://localhost:4200/text-template-management/text-templates
http://localhost:4200/language-management/languages
http://localhost:4200/language-management/texts
http://localhost:4200/identity/organization-units
http://localhost:4200/identity/roles
http://localhost:4200/identity/users
http://localhost:4200/identity/claim-types
http://localhost:4200/identity/security-logs
http://localhost:4200/saas/tenants
http://localhost:4200/saas/editions

This link is not affected
http://localhost:4200/setting-management

Sidebar refresh does not expand automatically after using the fix
QQ202543-95347.mp4_20250403_095451.gif

sumeyye.kurtulus created a day ago

Support Team Angular Expert

This problem occurs where this permission guard is used. That is why, some routes are affected while others are not.

Does the module need to refer to permission.guard.ts separately in the next version?

The solution I offered is a temporary one, so you will not need it once it is fixed on our side. Also, I cannot produce the sidebar problem on my end. Can you confirm that this happens after adding the new guard?

464199480 created a day ago

The sidebar of this env is normal.

\\ environment.ts

const oAuthConfig = {
  issuer: 'https://localhost:44311/',
  redirectUri: baseUrl,
  clientId: 'BookStore_App',
  responseType: 'code',
  scope: 'offline_access BookStore',
  requireHttps: true,
  impersonation: {
    userImpersonation: true,
    tenantImpersonation: true,
  },
};

The sidebar of this env cannot be expanded.

\\ environment.ts

const oAuthConfig = {
  issuer: 'https://localhost:44311/',
  redirectUri: baseUrl,
  clientId: 'BookStore_App',
  responseType: 'password',  // change this
  scope: 'offline_access BookStore',
  requireHttps: true,
  impersonation: {
    userImpersonation: true,
    tenantImpersonation: true,
  },
};