angular - 具有动态标头授权的 Angular Apollo WebSocketLink
问题描述
我正在使用 graphql 订阅；最初，标头有一个空的授权令牌，登录后在本地存储中生成一个令牌变量。我想要做的是在登录后自动更新订阅标头中的令牌变量，我已经按照文档中的说明进行了尝试，但是令牌永远不会更新并且它总是将其发送为空。
我需要 WebSocketLink 中的标头在 connectionParams 中是动态的
这是我的 GraphQLModule 文件，希望有人能帮助我...
import { NgModule } from '@angular/core';
import { ApolloClientOptions, InMemoryCache, split ,ApolloLink} from '@apollo/client/core';
import { APOLLO_OPTIONS } from 'apollo-angular';
import { HttpLink } from 'apollo-angular/http';
import {WebSocketLink} from '@apollo/client/link/ws';
import {getMainDefinition} from '@apollo/client/utilities';
import { environment } from 'environments/environment';
import * as CryptoJS from 'crypto-js';
import { setContext } from '@apollo/client/link/context';
import {onError} from '@apollo/client/link/error';
import Swal from 'sweetalert2';
import { CoreTranslationService } from '@core/services/translation.service';
import { locale as en } from 'app/main/pages/i18n/en';
import { locale as es } from 'app/main/pages/i18n/es';
const uri = environment.apiUrl; // <-- endpoint1 gql
const urisub = environment.apiSubs;// <-- endpoint2 gql
function operationFilter(operationName:string):boolean{
if(operationName!="checkToken") return true;
else return false; //and the others
}
export function createApollo(httpLink: HttpLink,_coreTranslationService: CoreTranslationService): ApolloClientOptions<any> {
_coreTranslationService.translate(en, es);
const basic = setContext((operation, context) => ({
headers: {
Accept: 'charset=utf-8'
}
}));
const auth = setContext((operation, context) => {
const token = localStorage.getItem('token');
if (token === null) {
return {};
} else {
let token_decrypt= CryptoJS.AES.decrypt(token,environment.key_decrypt).toString(CryptoJS.enc.Utf8)
return {
headers: {
Authorization: `Bearer ${token_decrypt}`
}
};
}
});
const http = httpLink.create({
uri(operation){
return operationFilter(operation.operationName)? uri : urisub;
}
});
const ws = new WebSocketLink({
uri:`ws://localhost:3005/subscriptions`,
options:{
lazy: true,
reconnect: true,
connectionParams: async () => {
const token = localStorage.getItem('token');
let token_decrypt= null
if (token) {
token_decrypt= CryptoJS.AES.decrypt(token,environment.key_decrypt).toString(CryptoJS.enc.Utf8)
}
return {
Authorization: token ? `Bearer ${token_decrypt}` : "",
}
},
}
});
const error = onError(({networkError, graphQLErrors}) => {
if (graphQLErrors) {
graphQLErrors.map(({
message,
locations,
path,
extensions
}) =>{
console.log('error graph', localStorage.getItem('token'));
if (extensions && localStorage.getItem('token')!=null) {
if (extensions.exception.status==401) {
Swal.fire({
icon: 'error',
title: _coreTranslationService.instant('ErrorSub.Title'),
text: _coreTranslationService.instant('ErrorSub.Message'),
timer: 6000,
timerProgressBar: true,
showCancelButton: false,
showConfirmButton: false,
allowOutsideClick: false,
allowEscapeKey: false
});
setTimeout(() => {
localStorage.clear();
window.location.href = "/pages/authentication/login-v2";
}, 7000);
}
}
}
);
}
if (networkError) {
console.log(`[Network error]: ${networkError}`);
}
})
const _split = split(
({query}) => {
const data = getMainDefinition(query);
return (
data.kind === 'OperationDefinition' && data.operation === 'subscription'
);
},
ws,
//http
auth.concat(http)
)
const cleanTypeName = new ApolloLink((operation, forward) => {
if (operation.variables) {
const omitTypename = (key, value) => (key === '__typename' ? undefined : value);
operation.variables = JSON.parse(JSON.stringify(operation.variables), omitTypename);
}
return forward(operation).map((data) => {
return data;
});
});
const link =ApolloLink.from([cleanTypeName, basic, error, _split]);
return {
link: link,
cache: new InMemoryCache({
addTypename: false,
}),
defaultOptions: {
watchQuery: {
fetchPolicy: 'network-only',
//errorPolicy: 'all',
},
query: {
fetchPolicy: 'network-only',
},
mutate: {
}
},
};
}
@NgModule({
providers: [
{
provide: APOLLO_OPTIONS,
useFactory: createApollo,
deps: [HttpLink, CoreTranslationService],
},
],
})
export class GraphQLModule {
}
解决方案
我分享我的解决方案，我不知道它是否是最佳选择，但它是在客户端对我有用的解决方案：
graphql.module.ts
import { NgModule } from '@angular/core';
import { ApolloClientOptions, InMemoryCache, split ,ApolloLink, Operation, makeVar} from '@apollo/client/core';
import { Apollo, APOLLO_OPTIONS } from 'apollo-angular';
import { HttpLink } from 'apollo-angular/http';
import {WebSocketLink} from '@apollo/client/link/ws';
import {getMainDefinition} from '@apollo/client/utilities';
import { environment } from 'environments/environment';
import * as CryptoJS from 'crypto-js';
import { setContext } from '@apollo/client/link/context';
import {onError} from '@apollo/client/link/error';
import Swal from 'sweetalert2';
import { CoreTranslationService } from '@core/services/translation.service';
import { locale as en } from 'app/main/pages/i18n/en';
import { locale as es } from 'app/main/pages/i18n/es';
import { SubscriptionClient } from 'subscriptions-transport-ws';
import { HttpClientModule } from '@angular/common/http';
import {HttpLinkModule} from 'apollo-angular-link-http';
const uri = environment.apiUrl;
const urisub = environment.apiSubs;
function operationFilter(operationName:string):boolean{
if(operationName!="checkToken") return true;
else return false;
@NgModule({
exports: [
HttpClientModule,
HttpLinkModule
]
})
export class GraphQLModule {
public Clientws: any;
public subscriptionClient: SubscriptionClient = null;
constructor(apollo: Apollo, httpLink: HttpLink,_coreTranslationService: CoreTranslationService){
_coreTranslationService.translate(en, es);
const getIdToken = () => localStorage.getItem('token') || null;
const auth = setContext((operation, context) => {
return {
headers: {
Authorization: `Bearer ${getIdToken()}`
}
};
});
const http = httpLink.create({
uri(operation){
return operationFilter(operation.operationName)? uri : urisub;
}
});
const wsClient = new SubscriptionClient(`ws://localhost:3005/subscriptions`, {
reconnect: true,
connectionParams: async () => {
return {
Authorization:`Bearer ${getIdToken()}`,
}
},
})
this.Clientws = wsClient
const ws = new WebSocketLink(wsClient)
this.subscriptionClient = (<any>ws).subscriptionClient;
const error = onError(({networkError, graphQLErrors}) => {
if (graphQLErrors && getIdToken()!=null && getIdToken()!='') {
graphQLErrors.map(({
message,
locations,
path,
extensions
}) =>{
if (extensions) {
if (extensions.exception.status==401 && getIdToken()!=null && getIdToken()!='') {
Swal.fire({
icon: 'error',
title: _coreTranslationService.instant('ErrorSub.Title'),
text: _coreTranslationService.instant('ErrorSub.Message'),
timer: 6000,
timerProgressBar: true,
showCancelButton: false,
showConfirmButton: false,
allowOutsideClick: false,
allowEscapeKey: false
});
setTimeout(() => {
localStorage.clear();
window.location.href = "/pages/authentication/login-v2";
}, 7000);
}
}
}
);
}
if (networkError) {
console.log(`[Network error]:`, networkError);
}
})
const _split = split(
({query}) => {
const data = getMainDefinition(query);
return (
data.kind === 'OperationDefinition' && data.operation === 'subscription'
);
},
ws,
auth.concat(http)
)
const cleanTypeName = new ApolloLink((operation, forward) => {
if (operation.variables) {
const omitTypename = (key, value) => (key === '__typename' ? undefined : value);
operation.variables = JSON.parse(JSON.stringify(operation.variables), omitTypename);
}
return forward(operation).map((data) => {
return data;
});
});
const basic = setContext((operation, context) => ({
headers: {
Accept: 'charset=utf-8'
}
}));
const link =ApolloLink.from([cleanTypeName, basic, error, _split]);
apollo.create({
link:link,
cache: new InMemoryCache({
addTypename: false,
}),
defaultOptions: {
watchQuery: {
fetchPolicy: 'network-only',
//errorPolicy: 'all',
},
query: {
fetchPolicy: 'network-only',
},
mutate: {
}
},
});
}
}
登录组件.ts
constructor(
.....,
private gqlModule: GraphQLModule,
.....
){
.......
}
onSubmit(event) { //submit login form
......
//if service login response true
this.gqlModule.Clientws.close(false,false); // this closes the websocket and automatically it reconnects with the new information in the header
//Note .. If you do not have the reconnection in true, you need to connect again manually
......
}
在服务器端：
配置订阅选项
onConnect: (connectionParams, webSocket, context) => {
if (connectionParams['Authorization'] != null && connectionParams['Authorization'] != '') {
if (connectionParams['Authorization'].split(" ")[1]!= null && connectionParams['Authorization'].split(" ")[1]!= '' && connectionParams['Authorization'].split(" ")[1]!= 'null') {
return { authorization: connectionParams['Authorization'] };
}
}
},
推荐阅读
- vue.js - 将列表类型的道具传递给子组件默认情况下会将一项添加到列表中-Vuejs
- python - 使用 numpy/scipy 中的插值填充 2d 矩阵中的缺失值
- python - 无法在 Linux Mint 18.2 Cinnamon 64 位的 Anaconda Navigator 中打开 Spyder
- sql - 如何从 Microsoft T-SQL 返回空格？
- typescript - 为字符串对象属性定义类型。泛型和显式类型之间的区别
- c - 用于编写延迟方法的 msp430 定时器中断
- swift - 部署 init vapor 4 项目导致错误
- react-native - React-redux 和 React Navigation 连接方法给出了 TypeError
- python - Django postgres 数据库连接 - 导入 _psycopg 时 DLL 加载失败：找不到指定的模块
- firebase - 如何在firestore中的集合之间复制数据？