AngularクライアントでApollo resetStoreが動作しません

Question

クライアント側で認証トークンを統合しようとしています。私はこのトークンをミドルウェアに渡しています。ユーザーがログアウトするとストアがリセットされ、新しいトークンが取得されます。今、私は新しい要求、それはまだ古いトークンを送信している（キャッシュ）を送信するときにここで

は、私はこのコードを持ってログアウトないときに私のコードは

const networkInterface = createNetworkInterface({ 
    uri: "http://localhost:3000/graphql" 
}); 

networkInterface.use([ 
    { 
    applyMiddleware(req, next) { 
     if (!req.options.headers) { 
     req.options.headers = {}; // Create the header object if needed. 
     } 

     req.options.headers.authorization = localStorage.getItem(AUTH_TOKEN); 
     next(); 
    } 
    } 
]); 

export function provideClient(): ApolloClient { 
    return new ApolloClient({ 
    networkInterface, 
    dataIdFromObject: (o: any) => `${o.__typename}-${o.id},` 
    }); 
} 

をapp.module.tsある

localStorage.removeItem(AUTH_TOKEN); 
this._apollo.getClient().resetStore(); 

それから私は別の要求をするときに依然として要求ヘッダーの古いトークンを取っています。

これを新しいトークンでどのように更新できますか？

Answer 1

私はこれにミドルウェアを変更する場合があります：

networkInterface.use([{ 
    applyMiddleware(req, next) { 
     if (!req.options.headers) req.options.headers = {} 
     const token = localStorage.getItem('token') 
     req.options.headers.authorization = token ? token : null 
     next() 
    } 
}]) 

token ? token : null、そこに三項演算子を注意してください。これにより、アプリケーションがトークンを認識しない限り、authヘッダーを送信できなくなります。クライアントが依然としてそれを送信している場合、トークンは適切に削除されていません。

ログアウトした後、F12キーを押してブラウザのコンソールに「localStorage」と入力し、そこにトークンがまだ残っているかどうかを確認してください。

私はあなたのコードではわかりませんが、あなたのような 'トークン'のような文字列を返すAUTH_TOKENという変数があるようです。私はあなたが値ではなくキーでトークンを削除していることを明示的に言いたいだけです。

トークン追加：localStorage.setItem('token', 'e47nes45nysde5nue5nu')

は、トークンの削除：localStorage.removeItem('token')

を使用すると、コードは次のようである場合：次に

const AUTH_TOKEN = 'e47nes45nysde5nue5nu' 
localStorage.removeItem(AUTH_TOKEN) 

それはまだ認証トークンを使用してクエリを作っている理由、それはあります。 localStorageから削除する一致するキーが見つからない場合、コンソールにエラーが生成されるとは思わない。