Angular 8 配置 oidc

最新推荐文章于 2022-08-09 21:48:12 发布

bey6

最新推荐文章于 2022-08-09 21:48:12 发布

阅读量1.3k

点赞数 1

分类专栏： Angular Bey 篇文章标签： angualr oidc oidc-client guard ng

本文链接：https://blog.csdn.net/beikepang/article/details/89112924

版权

本文详细介绍了如何在 Angular 8 项目中配置 oidc-client，包括新建 ng 项目、安装库、配置参数、模块划分、守卫配置、添加 auth 子组件和子路由、退出登录及保护子路由。最后提供了 Github 源码供参考。

摘要由CSDN通过智能技术生成

配置相对较为繁琐，最后会放上 Github 源码地址

新建一个 ng 项目

ng new angular-oidc

进入目录 cd angular-oidc

安装 oidc-client

npm i oidc-client --save

配置 oidc-client 参数

打开 environment.ts 将下面的代码覆盖原来的内容

import { WebStorageStateStore } from "oidc-client";

export const environment = {
  production: false,
  authConfig: {
    authority: "http://localhost:57001",
    client_id: "query",
    redirect_uri: "http://localhost:4200/login-callback",
    response_type: "id_token token",
    scope: "openid profile",
    post_logout_redirect_uri: "http://localhost:4200",
    accessTokenExpiringNotificationTime: 4,
    filterProtocolClaims: true,
    silentRequestTimeout: 10000,
    loadUserInfo: true,
    userStore: new WebStorageStateStore({ store: window.localStorage }),
  },
};

需要修改的几个参数:

authority: 认证服务器,需要修改为自己的认证服务器
client_id: 客户端 id ,按照约定修改即可
redirect_uri: 认证服务器回调的客户端页面
post_logout_redirect_uri: 登出回调链接

模块划分

这里我们把模块划分为2块: 1) 游客模块 2) 用户模块

默认的壳组件所在的 module 作为游客模块, 另外还需要构建一个用户模块

游客模块

为了方便理解, 游客模块创建一个欢迎页, 点击继续按钮访问用户模块.

1. 创建一个欢迎页

没什么特别的作用, 就是为了方便理解单独设立的一个交互页面.

ng g c public/index

修改 index.component.html

<h3>WELLCOME TO ANGULAR OIDC</h3>
<input type="button" value="visit" (click)="visitAuth()">

修改 index.component.ts

import { Component, OnInit } from "@angular/core";
import { Router } from "@angular/router";

@Component({
  selector: "app-index",
  templateUrl: "./index.component.html",
  styleUrls: ["./index.component.less"],
})
export class IndexComponent implements OnInit {
  constructor(private _router: Router) {}

  ngOnInit() {}

  public visitAuth(): void {
    this._router.navigate(["auth"]);
  }
}

2. 创建一个回调页

回调页是用户 oidc 认证结束后的回调, 起到一个过度的作用(目前先空着)

ng g c public/login-callback

3. 配置路由

打开 app-routing.module.ts, 对照修改

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { IndexComponent } from "./public/index/index.component";
import { LoginCallbackComponent } from "./public/login-callback/login-callback.component";

const routes: Routes = [
  {
    path: "",
    pathMatch: "full",
    component: IndexComponent,
  },
  {
    path: "login-callback",
    component: LoginCallbackComponent,
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModul