HttpInterceptor ਨਾਲ ਐਂਗੁਲਰ ਵਿੱਚ JWT ਰਿਫ੍ਰੈਸ਼ ਟੋਕਨ ਹੈਂਡਲਿੰਗ ਨੂੰ ਹੱਲ ਕਰਨਾ

ਐਂਗੁਲਰ ਇੰਟਰਸੈਪਟਰਾਂ ਵਿੱਚ ਸਹਿਜ JWT ਰਿਫਰੈਸ਼ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣਾ

ਸੁਰੱਖਿਅਤ ਉਪਭੋਗਤਾ ਸੈਸ਼ਨਾਂ ਦੇ ਨਾਲ ਇੱਕ ਵੈੱਬ ਐਪ ਵਿੱਚ, ਨਿਰਵਿਘਨ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਲਈ ਥੋੜ੍ਹੇ ਸਮੇਂ ਦੇ JWT ਟੋਕਨਾਂ ਦਾ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਢੰਗ ਨਾਲ ਪ੍ਰਬੰਧਨ ਕਰਨਾ ਮਹੱਤਵਪੂਰਨ ਹੈ। ਜਦੋਂ ਟੋਕਨਾਂ ਦੀ ਮਿਆਦ ਖਤਮ ਹੋ ਜਾਂਦੀ ਹੈ, ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਅਕਸਰ ਸਮੱਸਿਆਵਾਂ ਦਾ ਸਾਹਮਣਾ ਕਰਨਾ ਪੈਂਦਾ ਹੈ ਜਿਵੇਂ ਕਿ ਮੁੜ-ਲਾਗਇਨ ਕਰਨ ਲਈ ਮਜਬੂਰ ਕੀਤਾ ਜਾਣਾ, ਜੋ ਨਿਰਾਸ਼ਾਜਨਕ ਹੋ ਸਕਦਾ ਹੈ ਅਤੇ ਉਪਭੋਗਤਾ ਦੀ ਸ਼ਮੂਲੀਅਤ ਨੂੰ ਵਿਗਾੜ ਸਕਦਾ ਹੈ। ਇਸ ਨਾਲ ਨਜਿੱਠਣ ਲਈ, ਡਿਵੈਲਪਰ ਆਮ ਤੌਰ 'ਤੇ ਮਿਆਦ ਪੁੱਗੇ ਸੈਸ਼ਨਾਂ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਐਂਗੁਲਰ ਇੰਟਰਸੈਪਟਰ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਆਟੋਮੈਟਿਕ ਟੋਕਨ ਰਿਫ੍ਰੈਸ਼ ਨੂੰ ਲਾਗੂ ਕਰਦੇ ਹਨ। 🕰️

ਇਸ ਪਹੁੰਚ ਵਿੱਚ HTTP ਬੇਨਤੀਆਂ ਨੂੰ ਰੋਕਣਾ, 401 ਤਰੁੱਟੀਆਂ (ਅਣਅਧਿਕਾਰਤ ਬੇਨਤੀਆਂ) ਨੂੰ ਫੜਨਾ, ਅਤੇ ਫਿਰ ਇੱਕ ਨਵਾਂ ਟੋਕਨ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਇੱਕ ਤਾਜ਼ਾ ਪ੍ਰਕਿਰਿਆ ਸ਼ੁਰੂ ਕਰਨਾ ਸ਼ਾਮਲ ਹੈ। ਹਾਲਾਂਕਿ, ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਵਿੱਚ ਸਮੱਸਿਆਵਾਂ ਪੈਦਾ ਹੋ ਸਕਦੀਆਂ ਹਨ ਕਿ ਅੱਪਡੇਟ ਕੀਤੇ ਗਏ ਟੋਕਨ ਜਾਂ ਕੂਕੀ ਨੂੰ ਮੁੜ ਕੋਸ਼ਿਸ਼ ਕੀਤੀਆਂ ਬੇਨਤੀਆਂ 'ਤੇ ਲਾਗੂ ਕੀਤਾ ਗਿਆ ਹੈ। ਜੇਕਰ ਨਵਾਂ ਟੋਕਨ ਸਹੀ ਢੰਗ ਨਾਲ ਪ੍ਰਸਾਰਿਤ ਨਹੀਂ ਹੁੰਦਾ ਹੈ, ਤਾਂ ਮੁੜ-ਕੋਸ਼ਿਸ਼ ਅਸਫਲ ਹੋ ਸਕਦੀ ਹੈ, ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਉਹੀ ਪ੍ਰਮਾਣੀਕਰਨ ਗਲਤੀ ਅਤੇ ਸੰਭਾਵੀ ਤੌਰ 'ਤੇ ਐਪ ਵਰਕਫਲੋ ਵਿੱਚ ਵਿਘਨ ਪਾਉਂਦਾ ਹੈ।

ਇਸ ਗਾਈਡ ਵਿੱਚ, ਅਸੀਂ ਇਸ ਇੰਟਰਸੈਪਟਰ ਪੈਟਰਨ ਨੂੰ ਅਮਲੀ ਰੂਪ ਵਿੱਚ ਲਾਗੂ ਕਰਾਂਗੇ। ਅਸੀਂ ਦੇਖਾਂਗੇ ਕਿ ਤਰੁੱਟੀਆਂ ਨੂੰ ਕਿਵੇਂ ਫੜਨਾ ਹੈ, ਟੋਕਨਾਂ ਨੂੰ ਰਿਫ੍ਰੈਸ਼ ਕਰਨਾ ਹੈ, ਅਤੇ ਪੁਸ਼ਟੀ ਕਰਾਂਗੇ ਕਿ ਬੇਨਤੀਆਂ ਨੂੰ ਪ੍ਰਮਾਣਿਕਤਾ ਦੇ ਨਾਲ ਮੁੜ-ਕੋਸ਼ਿਸ਼ ਕਰਨਾ ਹੈ। ਇਹ ਪਹੁੰਚ ਤੁਹਾਨੂੰ ਸੈਸ਼ਨ ਨਵਿਆਉਣ ਦੀ ਪ੍ਰਕਿਰਿਆ 'ਤੇ ਨਿਯੰਤਰਣ ਦਿੰਦੇ ਹੋਏ ਰੁਕਾਵਟਾਂ ਨੂੰ ਘੱਟ ਕਰਦੀ ਹੈ।

ਅੰਤ ਤੱਕ, ਤੁਸੀਂ ਇਸ ਬਾਰੇ ਸਮਝ ਪ੍ਰਾਪਤ ਕਰੋਗੇ ਕਿ ਆਮ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਕਿਵੇਂ ਹੱਲ ਕਰਨਾ ਹੈ, ਜਿਵੇਂ ਕਿ HttpOnly ਕੂਕੀਜ਼ ਨੂੰ ਸੰਭਾਲਣਾ ਅਤੇ ਉੱਚ ਬੇਨਤੀ ਵਾਲੀਅਮ ਦੇ ਦੌਰਾਨ ਰਿਫ੍ਰੈਸ਼ ਕ੍ਰਮ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰਨਾ। ਇਹ ਵਿਧੀ ਯਕੀਨੀ ਬਣਾਉਂਦੀ ਹੈ ਕਿ ਤੁਹਾਡੀ ਐਪਲੀਕੇਸ਼ਨ ਨਿਰੰਤਰ ਲੌਗਇਨ ਦੇ ਬਿਨਾਂ ਇੱਕ ਸੁਰੱਖਿਅਤ, ਨਿਰਵਿਘਨ ਉਪਭੋਗਤਾ ਸੈਸ਼ਨ ਨੂੰ ਕਾਇਮ ਰੱਖ ਸਕਦੀ ਹੈ। 🔒

Angular interceptors ਨਾਲ ਭਰੋਸੇਯੋਗ JWT ਪ੍ਰਮਾਣਿਕਤਾ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣਾ

ਉਪਰੋਕਤ ਉਦਾਹਰਨ ਵਿੱਚ, ਜਦੋਂ ਵੀ ਕੋਈ 401 ਗਲਤੀ ਆਉਂਦੀ ਹੈ ਤਾਂ ਇੰਟਰਸੈਪਟਰ ਨੂੰ ਇੱਕ ਥੋੜ੍ਹੇ ਸਮੇਂ ਲਈ JWT ਟੋਕਨ ਨੂੰ ਆਪਣੇ ਆਪ ਤਾਜ਼ਾ ਕਰਨ ਲਈ ਤਿਆਰ ਕੀਤਾ ਗਿਆ ਹੈ। ਸੰਵੇਦਨਸ਼ੀਲ ਡੇਟਾ ਵਾਲੀਆਂ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ ਇਸ ਕਿਸਮ ਦਾ ਸੈੱਟਅੱਪ ਜ਼ਰੂਰੀ ਹੈ, ਜਿੱਥੇ ਸੈਸ਼ਨ ਸੁਰੱਖਿਆ ਨੂੰ ਬਣਾਈ ਰੱਖਣਾ ਮਹੱਤਵਪੂਰਨ ਹੈ, ਪਰ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਵਿੱਚ ਰੁਕਾਵਟ ਨਹੀਂ ਹੋਣੀ ਚਾਹੀਦੀ। ਇੰਟਰਸੈਪਟਰ 401 (ਅਣਅਧਿਕਾਰਤ) ਗਲਤੀ ਨੂੰ ਫੜਦਾ ਹੈ ਅਤੇ ਉਪਭੋਗਤਾ ਨੂੰ ਮੁੜ-ਪ੍ਰਮਾਣਿਤ ਕਰਨ ਦੀ ਲੋੜ ਤੋਂ ਬਿਨਾਂ ਸੈਸ਼ਨ ਨੂੰ ਰੀਨਿਊ ਕਰਨ ਲਈ ਇੱਕ ਤਾਜ਼ਾ ਟੋਕਨ ਬੇਨਤੀ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ। ਇਹ ਪ੍ਰਕਿਰਿਆ catchError ਫੰਕਸ਼ਨ ਦੁਆਰਾ ਸ਼ੁਰੂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, ਜੋ ਇੱਕ ਨਿਰੀਖਣਯੋਗ ਪਾਈਪਲਾਈਨ ਦੇ ਅੰਦਰ ਗਲਤੀ ਨੂੰ ਸੰਭਾਲਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ। ਇੱਥੇ, ਕੋਈ ਵੀ HTTP ਗਲਤੀ, ਖਾਸ ਤੌਰ 'ਤੇ ਇੱਕ 401, ਸੰਕੇਤ ਦਿੰਦਾ ਹੈ ਕਿ ਟੋਕਨ ਦੀ ਮਿਆਦ ਪੁੱਗ ਗਈ ਹੈ ਅਤੇ ਤਾਜ਼ਗੀ ਪ੍ਰਕਿਰਿਆ ਸ਼ੁਰੂ ਕਰਦੀ ਹੈ।

ਸਵਿੱਚਮੈਪ ਫੰਕਸ਼ਨ ਇੱਥੇ ਇੱਕ ਹੋਰ ਮੁੱਖ ਤੱਤ ਹੈ; ਇਹ ਤਾਜ਼ਗੀ ਬੇਨਤੀ ਲਈ ਇੱਕ ਨਵੀਂ ਨਿਰੀਖਣਯੋਗ ਸਟ੍ਰੀਮ ਬਣਾਉਂਦਾ ਹੈ, ਪੂਰੇ ਪ੍ਰਵਾਹ ਨੂੰ ਰੱਦ ਕੀਤੇ ਬਿਨਾਂ ਪੁਰਾਣੇ ਨਿਰੀਖਣਯੋਗ ਨੂੰ ਬਦਲਦਾ ਹੈ। ਤਾਜ਼ਾ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਇਹ ਅਸਲੀ ਬੇਨਤੀ ਦੀ ਮੁੜ ਕੋਸ਼ਿਸ਼ ਕਰਦਾ ਹੈ, ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਨਵਾਂ ਟੋਕਨ ਲਾਗੂ ਕੀਤਾ ਗਿਆ ਹੈ। ਪੁਰਾਣੇ ਨਿਰੀਖਣਯੋਗ ਤੋਂ ਇੱਕ ਨਵੇਂ ਵਿੱਚ ਬਦਲ ਕੇ, ਇੰਟਰਸੈਪਟਰ ਇੱਕ ਸਹਿਜ, ਗੈਰ-ਬਲਾਕਿੰਗ ਤਰੀਕੇ ਨਾਲ ਟੋਕਨ ਰੀਨਿਊਲ ਕਰ ਸਕਦਾ ਹੈ। ਅਸਲ-ਸਮੇਂ ਦੀਆਂ ਐਪਲੀਕੇਸ਼ਨਾਂ ਦੇ ਨਾਲ ਕੰਮ ਕਰਦੇ ਸਮੇਂ ਇਹ ਤਕਨੀਕ ਖਾਸ ਤੌਰ 'ਤੇ ਕੀਮਤੀ ਹੁੰਦੀ ਹੈ, ਕਿਉਂਕਿ ਇਹ ਸੁਰੱਖਿਅਤ ਪ੍ਰਮਾਣਿਕਤਾ ਨੂੰ ਕਾਇਮ ਰੱਖਦੇ ਹੋਏ ਉਪਭੋਗਤਾ ਇੰਟਰੈਕਸ਼ਨਾਂ ਵਿੱਚ ਰੁਕਾਵਟਾਂ ਨੂੰ ਘਟਾਉਂਦੀ ਹੈ। ਉਦਾਹਰਨ ਲਈ, ਇੱਕ ਸੁਰੱਖਿਅਤ ਵਿੱਤੀ ਡੈਸ਼ਬੋਰਡ ਬ੍ਰਾਊਜ਼ ਕਰਨ ਵਾਲੇ ਉਪਭੋਗਤਾ ਨੂੰ ਰੀਡਾਇਰੈਕਟ ਜਾਂ ਬੇਲੋੜੀ ਲੌਗ ਆਊਟ ਨਹੀਂ ਕੀਤਾ ਜਾਵੇਗਾ; ਇਸਦੀ ਬਜਾਏ, ਨਵਾਂ ਟੋਕਨ ਪ੍ਰਾਪਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਅਤੇ ਪਿਛੋਕੜ ਵਿੱਚ ਲਾਗੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। 🔄

ਇਸ ਤੋਂ ਇਲਾਵਾ, BehaviorSubject ਰਿਫਰੈਸ਼ ਪ੍ਰਕਿਰਿਆ ਦੀ ਸਥਿਤੀ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰਕੇ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਭੂਮਿਕਾ ਨਿਭਾਉਂਦਾ ਹੈ। ਇਹ RxJS ਉਪਯੋਗਤਾ ਆਖਰੀ ਉਤਸਰਜਿਤ ਮੁੱਲ ਨੂੰ ਬਰਕਰਾਰ ਰੱਖ ਸਕਦੀ ਹੈ, ਜੋ ਕਿ ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਮਦਦਗਾਰ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਇੱਕੋ ਸਮੇਂ ਕਈ ਬੇਨਤੀਆਂ 401 ਗਲਤੀ ਦਾ ਸਾਹਮਣਾ ਕਰਦੀਆਂ ਹਨ। ਮਲਟੀਪਲ ਰਿਫਰੈਸ਼ਾਂ ਨੂੰ ਟਰਿੱਗਰ ਕਰਨ ਦੀ ਬਜਾਏ, ਇੰਟਰਸੈਪਟਰ ਸਿਰਫ ਇੱਕ ਟੋਕਨ ਰਿਫ੍ਰੈਸ਼ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ, ਅਤੇ ਬਾਕੀ ਸਾਰੀਆਂ ਬੇਨਤੀਆਂ ਇਸ ਸਿੰਗਲ ਟੋਕਨ ਨਵੀਨੀਕਰਨ ਦੀ ਉਡੀਕ ਕਰਨ ਲਈ ਕਤਾਰ ਵਿੱਚ ਹਨ। switchMap ਦੇ ਨਾਲ BehaviorSubject ਦੀ ਵਰਤੋਂ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰਦੀ ਹੈ ਕਿ ਜੇਕਰ ਇੱਕ ਬੇਨਤੀ ਰਿਫ੍ਰੈਸ਼ ਨੂੰ ਚਾਲੂ ਕਰਦੀ ਹੈ, ਤਾਂ ਨਵੇਂ ਟੋਕਨ ਦੀ ਲੋੜ ਵਾਲੀਆਂ ਹੋਰ ਸਾਰੀਆਂ ਬੇਨਤੀਆਂ ਵਾਰ-ਵਾਰ ਰਿਫ੍ਰੈਸ਼ ਕਾਲਾਂ ਕੀਤੇ ਬਿਨਾਂ ਅੱਪਡੇਟ ਕੀਤੇ ਪ੍ਰਮਾਣ ਪੱਤਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨਗੀਆਂ। ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ ਉਹਨਾਂ ਮਾਮਲਿਆਂ ਵਿੱਚ ਬਹੁਤ ਮਦਦਗਾਰ ਹੈ ਜਿੱਥੇ ਉਪਭੋਗਤਾਵਾਂ ਕੋਲ ਇੱਕ ਤੋਂ ਵੱਧ ਖੁੱਲ੍ਹੀਆਂ ਟੈਬਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ, ਜਾਂ ਐਪ ਕਈ ਇੱਕੋ ਸਮੇਂ ਦੀਆਂ ਨੈੱਟਵਰਕ ਕਾਲਾਂ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰ ਰਿਹਾ ਹੈ, ਇਸ ਤਰ੍ਹਾਂ ਸਰੋਤਾਂ ਦੀ ਬਚਤ ਅਤੇ ਬਹੁਤ ਜ਼ਿਆਦਾ ਸਰਵਰ ਲੋਡ ਤੋਂ ਬਚਿਆ ਜਾ ਰਿਹਾ ਹੈ।

ਇਸ ਇੰਟਰਸੈਪਟਰ ਤਰਕ ਦੀ ਜਾਂਚ ਕਰਨਾ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਵੀ ਜ਼ਰੂਰੀ ਹੈ ਕਿ ਇਹ ਵੱਖ-ਵੱਖ ਸਥਿਤੀਆਂ ਵਿੱਚ ਕੰਮ ਕਰਦਾ ਹੈ, ਇਸ ਲਈ ਅਸੀਂ HttpTestingController ਨੂੰ ਸ਼ਾਮਲ ਕਰਦੇ ਹਾਂ। ਇਹ ਐਂਗੁਲਰ ਟੈਸਟਿੰਗ ਟੂਲ ਸਾਨੂੰ ਨਿਯੰਤਰਿਤ ਵਾਤਾਵਰਣ ਵਿੱਚ 401 ਅਣਅਧਿਕਾਰਤ ਸਥਿਤੀ ਵਰਗੇ HTTP ਜਵਾਬਾਂ ਦੀ ਨਕਲ ਅਤੇ ਜਾਂਚ ਕਰਨ ਦੇ ਯੋਗ ਬਣਾਉਂਦਾ ਹੈ। ਫਲੱਸ਼ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ, HttpTestingController ਦੁਆਰਾ ਪ੍ਰਦਾਨ ਕੀਤੀ ਗਈ ਇੱਕ ਵਿਧੀ, ਡਿਵੈਲਪਰ ਅਸਲ-ਸੰਸਾਰ ਗਲਤੀ ਜਵਾਬਾਂ ਦੀ ਨਕਲ ਕਰ ਸਕਦੇ ਹਨ ਅਤੇ ਪੁਸ਼ਟੀ ਕਰ ਸਕਦੇ ਹਨ ਕਿ ਇੰਟਰਸੈਪਟਰ ਉਮੀਦ ਅਨੁਸਾਰ ਵਿਵਹਾਰ ਕਰਦਾ ਹੈ। ਇਹ ਜਾਂਚ ਪਹੁੰਚ ਸਾਨੂੰ ਸੋਧਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੀ ਹੈ ਕਿ ਐਪ ਨੂੰ ਤੈਨਾਤ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਰੀਫ੍ਰੇਸ਼ ਤਰਕ ਵੱਖ-ਵੱਖ ਮਾਮਲਿਆਂ ਨੂੰ ਕਿੰਨੀ ਚੰਗੀ ਤਰ੍ਹਾਂ ਸੰਭਾਲਦਾ ਹੈ। ਇਹਨਾਂ ਤਰੀਕਿਆਂ ਨਾਲ, ਇੰਟਰਸੈਪਟਰ ਨਾ ਸਿਰਫ਼ ਸੈਸ਼ਨ ਨੂੰ ਸੁਰੱਖਿਅਤ ਢੰਗ ਨਾਲ ਸੁਰੱਖਿਅਤ ਰੱਖਦਾ ਹੈ ਬਲਕਿ ਐਪ ਨੂੰ ਨੈਵੀਗੇਟ ਕਰਨ ਵਾਲੇ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਵਧੇਰੇ ਸਹਿਜ, ਸਥਿਰ ਅਨੁਭਵ ਵੀ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। 👩‍💻

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpErrorResponse } from '@angular/common/http';
import { catchError, switchMap } from 'rxjs/operators';
import { Observable, throwError, BehaviorSubject } from 'rxjs';
import { AuthService } from './auth.service';
import { Router } from '@angular/router';
@Injectable()
export class JwtInterceptor implements HttpInterceptor {
  private refreshTokenInProgress$ = new BehaviorSubject<boolean>(false);
  constructor(private authService: AuthService, private router: Router) {}
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    req = req.clone({ withCredentials: true });
    return next.handle(req).pipe(
      catchError((error: HttpErrorResponse) => {
        if (error.status === 401) {
          return this.handle401Error(req, next);
        }
        return throwError(() => error);
      })
    );
  }
  private handle401Error(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (!this.refreshTokenInProgress$.getValue()) {
      this.refreshTokenInProgress$.next(true);
      return this.authService.refreshToken().pipe(
        switchMap(() => {
          this.refreshTokenInProgress$.next(false);
          return next.handle(req.clone({ withCredentials: true }));
        }),
        catchError((error) => {
          this.refreshTokenInProgress$.next(false);
          this.authService.logout();
          this.router.navigate(['/login'], { queryParams: { returnUrl: req.url } });
          return throwError(() => error);
        })
      );
    }
    return this.refreshTokenInProgress$.pipe(
      switchMap(() => next.handle(req.clone({ withCredentials: true })))
    );
  }
}

import { TestBed } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { JwtInterceptor } from './jwt.interceptor';
import { HTTP_INTERCEPTORS, HttpClient } from '@angular/common/http';
import { AuthService } from './auth.service';
describe('JwtInterceptor', () => {
  let httpMock: HttpTestingController;
  let authServiceSpy: jasmine.SpyObj<AuthService>;
  let httpClient: HttpClient;
  beforeEach(() => {
    authServiceSpy = jasmine.createSpyObj('AuthService', ['refreshToken', 'logout']);
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [
        JwtInterceptor,
        { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
        { provide: AuthService, useValue: authServiceSpy }
      ]
    });
    httpMock = TestBed.inject(HttpTestingController);
    httpClient = TestBed.inject(HttpClient);
  });
  afterEach(() => {
    httpMock.verify();
  });
  it('should refresh token on 401 error and retry request', () => {
    authServiceSpy.refreshToken.and.returnValue(of(true));
    httpClient.get('/test').subscribe();
    const req = httpMock.expectOne('/test');
    req.flush(null, { status: 401, statusText: 'Unauthorized' });
    expect(authServiceSpy.refreshToken).toHaveBeenCalled();
  });
});

ਐਂਗੁਲਰ ਇੰਟਰਸੈਪਟਰਾਂ ਨਾਲ JWT ਟੋਕਨ ਰਿਫਰੈਸ਼ ਰਣਨੀਤੀਆਂ ਦਾ ਵਿਸਤਾਰ ਕਰਨਾ

ਐਂਗੁਲਰ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦਾ ਇੱਕ ਨਾਜ਼ੁਕ ਪਹਿਲੂ JWT ਟੋਕਨ ਇੰਟਰਸੈਪਟਰ ਸੁਰੱਖਿਅਤ ਐਪਲੀਕੇਸ਼ਨਾਂ ਲਈ ਪ੍ਰਮਾਣਿਕਤਾ ਅਤੇ ਸੈਸ਼ਨ ਦੀ ਮਿਆਦ ਦੇ ਪ੍ਰਬੰਧਨ ਦੀਆਂ ਗੁੰਝਲਾਂ ਨੂੰ ਕੁਸ਼ਲਤਾ ਨਾਲ ਸੰਭਾਲ ਰਿਹਾ ਹੈ। ਸਿਰਫ਼ 401 ਤਰੁੱਟੀਆਂ ਨੂੰ ਫੜਨ ਅਤੇ ਟੋਕਨਾਂ ਨੂੰ ਤਾਜ਼ਾ ਕਰਨ ਤੋਂ ਇਲਾਵਾ, ਮਲਟੀ-ਰਿਵੈਸਟ ਹੈਂਡਲਿੰਗ ਅਤੇ ਟੋਕਨ ਰਿਫ੍ਰੈਸ਼ਾਂ ਨੂੰ ਅਨੁਕੂਲ ਬਣਾਉਣ ਬਾਰੇ ਸੋਚਣਾ ਜ਼ਰੂਰੀ ਹੈ। ਜਦੋਂ ਇੱਕ ਤੋਂ ਵੱਧ ਬੇਨਤੀਆਂ ਇੱਕੋ ਸਮੇਂ ਇੱਕ 401 ਗਲਤੀ ਦਾ ਸਾਹਮਣਾ ਕਰਦੀਆਂ ਹਨ, ਇੱਕ ਕਤਾਰ ਜਾਂ ਤਾਲਾਬੰਦੀ ਵਿਧੀ ਨੂੰ ਲਾਗੂ ਕਰਨਾ ਇੱਕ ਸਮੇਂ ਵਿੱਚ ਸਿਰਫ ਇੱਕ ਟੋਕਨ ਰਿਫਰੈਸ਼ ਹੋਣ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਬਹੁਤ ਉਪਯੋਗੀ ਹੋ ਸਕਦਾ ਹੈ। ਇਹ ਪਹੁੰਚ ਬੇਲੋੜੀਆਂ API ਕਾਲਾਂ ਨੂੰ ਰੋਕਦੀ ਹੈ ਅਤੇ ਲੋਡ ਨੂੰ ਘਟਾਉਂਦੀ ਹੈ, ਖਾਸ ਤੌਰ 'ਤੇ ਉੱਚ-ਟ੍ਰੈਫਿਕ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ, ਜਦੋਂ ਕਿ ਸਾਰੀਆਂ ਕਤਾਰਬੱਧ ਬੇਨਤੀਆਂ ਨੂੰ ਤਾਜ਼ਾ ਕਰਨ ਤੋਂ ਬਾਅਦ ਅੱਗੇ ਵਧਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ।

ਐਂਗੁਲਰ ਦੇ ਇੰਟਰਸੈਪਟਰ ਸਾਨੂੰ ਟੋਕਨ ਸਟੋਰੇਜ ਅਤੇ ਪ੍ਰਾਪਤੀ ਨੂੰ ਸੰਭਾਲਣ ਦੇ ਤਰੀਕੇ ਨੂੰ ਸੁਚਾਰੂ ਬਣਾਉਣ ਦੀ ਵੀ ਇਜਾਜ਼ਤ ਦਿੰਦੇ ਹਨ। ਸਥਾਨਕ ਸਟੋਰੇਜ ਵਿੱਚ ਹਾਰਡਕੋਡਿੰਗ ਟੋਕਨਾਂ ਦੀ ਬਜਾਏ, ਐਂਗੁਲਰ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਸਭ ਤੋਂ ਵਧੀਆ ਹੈ ਸਿਰਫ਼ Http ਕੂਕੀਜ਼ ਅਤੇ ਸੁਰੱਖਿਆ ਨੂੰ ਵਧਾਉਣ ਲਈ CSRF ਸੁਰੱਖਿਆ। HttpOnly ਕੂਕੀਜ਼ ਦੇ ਨਾਲ, JWT ਨੂੰ JavaScript ਦੁਆਰਾ ਐਕਸੈਸ ਜਾਂ ਹੇਰਾਫੇਰੀ ਨਹੀਂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਸੁਰੱਖਿਆ ਵਿੱਚ ਬਹੁਤ ਸੁਧਾਰ ਕਰਦਾ ਹੈ ਪਰ ਇੱਕ ਨਵੀਂ ਚੁਣੌਤੀ ਜੋੜਦੀ ਹੈ: ਇਹ ਯਕੀਨੀ ਬਣਾਉਣਾ ਕਿ ਬੇਨਤੀਆਂ ਆਪਣੇ ਆਪ ਰਿਫ੍ਰੈਸ਼ ਕੀਤੀ ਕੁਕੀਜ਼ ਨੂੰ ਚੁੱਕਦੀਆਂ ਹਨ। ਐਂਗੁਲਰ ਦਾ ਬਿਲਟ-ਇਨ withCredentials ਵਿਕਲਪ ਇੱਕ ਹੱਲ ਹੈ, ਹਰ ਬੇਨਤੀ 'ਤੇ ਇਹਨਾਂ ਕੂਕੀਜ਼ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਨਿਰਦੇਸ਼ ਦਿੰਦਾ ਹੈ।

ਇੱਕ ਉਤਪਾਦਨ ਵਾਤਾਵਰਣ ਵਿੱਚ, ਕਾਰਜਕੁਸ਼ਲਤਾ ਟੈਸਟਾਂ ਨੂੰ ਚਲਾਉਣ ਦੀ ਸਲਾਹ ਦਿੱਤੀ ਜਾਂਦੀ ਹੈ ਕਿ ਐਪਲੀਕੇਸ਼ਨ ਟੋਕਨ ਰਿਫ੍ਰੈਸ਼ਾਂ ਦੇ ਨਾਲ ਲੋਡ ਦੇ ਅਧੀਨ ਕਿਵੇਂ ਵਿਹਾਰ ਕਰਦੀ ਹੈ। ਟੈਸਟਿੰਗ ਸੈਟਅਪ ਉੱਚ ਬੇਨਤੀ ਵਾਲੀਅਮ ਦੀ ਨਕਲ ਕਰ ਸਕਦੇ ਹਨ, ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰਦੇ ਹੋਏ ਕਿ ਇੰਟਰਸੈਪਟਰ ਦਾ ਤਰਕ ਕੁਸ਼ਲਤਾ ਨਾਲ ਸਕੇਲ ਕਰਦਾ ਹੈ। ਅਭਿਆਸ ਵਿੱਚ, ਇਹ ਸੈੱਟਅੱਪ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕਰਨ ਵਾਲੀਆਂ ਟੋਕਨ-ਸਬੰਧਤ ਗਲਤੀਆਂ ਦੇ ਜੋਖਮ ਨੂੰ ਘੱਟ ਕਰਦਾ ਹੈ। ਇੰਟਰਸੈਪਟਰ ਰਣਨੀਤੀ, ਜਦੋਂ ਸਹੀ ਕੂਕੀ ਹੈਂਡਲਿੰਗ ਅਤੇ ਟੈਸਟਿੰਗ ਨਾਲ ਜੋੜੀ ਜਾਂਦੀ ਹੈ, ਇੱਕ ਸਹਿਜ, ਉਪਭੋਗਤਾ-ਅਨੁਕੂਲ, ਅਤੇ ਸੁਰੱਖਿਅਤ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਬਣਾਈ ਰੱਖਣ ਵਿੱਚ ਮਦਦ ਕਰਦੀ ਹੈ — ਭਾਵੇਂ ਐਪ ਨਾਜ਼ੁਕ ਵਿੱਤੀ ਡੇਟਾ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰਦੀ ਹੈ ਜਾਂ ਇੱਕ ਸਮਾਜਿਕ ਪਲੇਟਫਾਰਮ ਦੇ ਉਪਭੋਗਤਾ ਸੈਸ਼ਨਾਂ ਦਾ। 🌐🔐