Angular Lepton [403] You are not authorized #9057

464199480 created 4 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 3 days ago

Support Team Fullstack Developer

Can you share the logs.txt?

liming.ma@volosoft.com

464199480 created 2 days ago

Hi @maliming
It has been sent.

maliming created 2 days ago

Support Team Fullstack Developer

Thanks.

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

464199480 created about 18 hours ago

Hi @sumeyye.kurtulus.

Any temporary solution?

sumeyye.kurtulus created about 15 hours 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 about 2 hours 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