Okta 注销在 Angular 应用程序中不起作用

Question

之后的 angular 使用 OKTA SDK

此文档。我还使用 OktaCallbackComponent 和 OktaAuthService 进行身份验证。我可以成功登录。成功登录后，OKTA 将我重定向到 OktaCallbackComponent，他们将一些密钥存储在 localstroge 中，最后，我导航到我的主页。

现在，当我从应用程序中单击注销按钮时，它不起作用。如我所见，页面加载并立即导航到回调组件，然后再次导航到主页。而我希望登录页面应该出现在用户面前。

这是我的注销功能。

  async logout(){
   this.oktaAuth.tokenManager.clear()
   await this.oktaAuth.signOut();
   this.router.navigate(['/login']);
   this.toastr.success('Logout Successfully', 'See you next time' , {timeOut: 5000});
  }

任何人都可以帮助我解决问题。

  {
    path: 'main',
    component: OpDataTableComponent,
    canActivate: [ OktaAuthGuard ],
    data: {
      title: 'Main Page'
    }
  },


 {
    path: CALLBACK_PATH,
    component: OktaCallbackComponent,
    // Later: Add a component
  },

  {
    path: 'login',
    // component: LoginComponent,
    component:OktaLoginComponent,
    canActivate: [checkAfterLoginService],
    
    data: {
      title: 'Login Page'
    }
  }

CheckAfterLoginService

export class checkAfterLoginService {
  constructor(private oktaAuth: OktaAuthService,private tokenService: TokenService, private router: Router) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | Observable<boolean> | Promise<boolean> {
    if(this.oktaAuth.isAuthenticated())
    {
      return this.router.navigateByUrl('/main');
    }else
    {
      return false;
    }
  }
}

Okta 配置。

const ISSUER = 'https://...../oauth2/default';
const HOST = window.location.host;
const REDIRECT_URI = 'https://..../callback';
const SCOPES = 'openid profile email';

const config = {
  issuer: ISSUER,
  clientId: '.....',
  redirectUri: REDIRECT_URI,
  scopes: SCOPES.split(/\s+/)
};

P.s logout URL 添加到应用设置是https://../login 路由。我该如何解决这个问题或者可能是什么问题？非常感谢您的帮助。

Answer 1

尝试将您的 logout() 方法更改为如下：

async logout(){
  await this.oktaAuth.signOut();
  this.router.navigate(['/login']);
  this.toastr.success('Logout Successfully', 'See you next time' , {timeOut: 5000});
}

您目前正在手动清除令牌，这使得我们的底层 Auth JS SDK 认为您已经退出。 this.oktaAuth.signOut() 应该为您清理令牌。如果您仍想手动清除它们，请确保在 signOut().

之后执行

Okta 注销在 Angular 应用程序中不起作用

Okta signout don't work in Angular Applicaiton

okta

okta-api