vue 项目使用oidc-client

Vue项目中使用 oidc-client

一、安装

添加 oidc-client 的npm 包

npm i oidc-client -s

二、配置

配置oidc协议

src/services/oidcConfig.ts

import {
    WebStorageStateStore } from "oidc-client";

// 服务器地址
const STS_DOMAIN: string = (process.env.NODE_ENV == "development" ?  'https://192.168.0.11:5001' :'https://192.168.0.11:45456');

// 客户端页面地址
const LOC_DOMAIN: string = window.location.origin;   // 默认：http://localhost:8080

export const userSettings = {
   
    userStore: new WebStorageStateStore({
    store: window.localStorage }),
    loadUserInfo:true,
    authority: STS_DOMAIN,   // 认证服务器
    client_id: 'aaa',        // 客户端ID
    client_secret: 'abcdef',
    // grant_type:'Implicit',    // //验证模式  Implicit 模式
    redirect_uri: LOC_DOMAIN+'/callback.html',   // 重定向URI，认证服务器回调的客户端页面
    automaticSilentRenew: true,    // 启用静默刷新token
    silent_redirect_uri: LOC_DOMAIN+'/silent-renew.html',
    response_type: 'id_token token',      // 授权类型  请求身份令牌和访问令牌
    scope: 'openid profile roles',       // 申请的权限范围
    post_logout_redirect_uri: LOC_DOMAIN,   // 注销重定向的url
    // filterProtocolClaims: true,        // 告诉oidc-client过滤掉OIDC协议内部用的声明信息，如: nonce, at_hash, iat, nbf, exp, aud, iss 和 idp
}

注：配置信息需要与后端配置相匹配。

对 oidc-client 的 UserManager 进行封装。

单例模式

src/services/AuthService.ts

import {
    UserManager, WebStorageStateStore, User } from 'oidc-client';
import {
    userSettings } from "@/services/oidcConfig";
import {
    ReplaySubject } from "rxjs";

export default class<