أواجه مشكلة في تحديد المستخدمين المتصلين بمقابس الويب. إليك كيفية إعادة إظهار هذه المشكلة:
1) قم بإنشاء عميل جديد وقم بتكوين WebSocketLink
بـ connectionParams
.
const wsLink = new WebSocketLink({
uri: `ws://localhost:3333`,
options: {
connectionParams: {
lazy: true,
authToken: localStorage.getItem('token')
}
}
});
في هذه المرحلة ، لم يقم المستخدم بتسجيل الدخول ، ولا يوجد رمز مميز. لم يتم توصيل websocket بعد ، لأنه تم تعيين lazy
على true. لا يتم الاتصال حتى يتم إرسال أول اشتراك ، بعد أن يقوم المستخدم بتسجيل الدخول.
عندما يقوم المستخدم بتسجيل الدخول ، وتم إجراء الاتصال ، يكون authToken
فارغًا لأنه تم تعيين هذه القيمة عندما تم تكوين العميل ، وليس بعد أن يقوم المستخدم بتسجيل الدخول.
subscriptionServer.onConnect = params => {
console.log('connected: ', params.authToken) // null
}
الاستعلامات والطفرات مصرح بها من خلال روابط متسلسلة:
const httpLink = new HttpLink({ uri: GRAPHQL_ENDPOINT })
const authLink = new ApolloLink((operation, forward) => {
const token = localStorage.getItem('token')
if (token) {
operation.setContext({
headers: {
authorization: `bearer ${token}`
}
})
}
return forward(operation)
})
const httpAuthLink = authLink.concat(httpLink)
يمكنني تحديد المستخدمين بهذه الطريقة لأنه تمت إضافة token
إلى رأس authorization
عند إرسال الطلب بعد تسجيل دخول المستخدم. المشكلة مع معلمات الاتصال WebSocketLink
هو أنه يقرأ الرمز المميز عندما يتم تكوين العميل قبل أن يقوم المستخدم بتسجيل الدخول.
لقد تمكنت من إيجاد حل مؤقت. بعد تحديد المستخدم وحفظ رمزه المميز في المتصفح ، أقوم بتحديث الصفحة: window.location = '/'
. إذا شعرت بالقذارة على الرغم من ذلك.
أي أفكار حول إضافة طرق onConnecting
و onDisconnect
إلى المُنشئ options
من WebSocketLink
؟ سيمنع هذا الأسلوب أي حاجة لتحديث الصفحة.
const wsLink = new WebSocketLink({
uri: `ws://localhost:3333`,
options: {
onConnecting: () => {
// Invoked just before the Socket initially connects
// returns additional connection params
return {
authToken: localStorage.getItem('token')
}
},
onDisconnect: () => {
// Invoked when the socket is disconnected
}
}
});
لا تفعل ذلك ، جرب هذا:
connectionParams: () => ({
lazy: true,
authToken: localStorage.getItem('token')
})
شكرا لك gpbaculio
التعليق الأكثر فائدة
لا تفعل ذلك ، جرب هذا: