ReactJS प्रोजेक्ट में, मैं 401 त्रुटि को संभालने और लॉगिन पृष्ठ पर रीडायरेक्ट करने के लिए एक वैश्विक Axios इंटरसेप्टर सेटअप करता हूं। यह अपेक्षा के अनुरूप काम कर रहा है यदि सर्वर 401 त्रुटि देता है।

//global interceptor for handling 401 (invalid token) response.
axios.interceptors.response.use(
  function (response) {
    console.log("Axios defaut interceptor");
    return response;
  },
  function (error) {
    if (401 === error.response.status) {
      alert(
        "Your session has expired. You will be redirected to the login page."
      );
      window.location = "/login";
    } else {
      return Promise.reject(error);
    }
  }
);

समस्या यह है कि मुख्य पृष्ठ क्लास कंपोनेंट के कंस्ट्रक्टर () विधि से कई GET अनुरोध भेजे जाते हैं। इसके कारण अलर्ट संदेश कई बार दिखाया जाता है।

त्रुटि को संभालने और केवल एक बार लॉगिन पृष्ठ पर रीडायरेक्ट करने का सबसे अच्छा तरीका क्या है?

0
Shankar P S 17 अप्रैल 2020, 06:03

1 उत्तर

सबसे बढ़िया उत्तर

समाधान यह सत्यापित करना था कि पृष्ठ लोड करने से पहले एक टोकन मौजूद है।

मैं मुख्य पृष्ठ लोड करने के लिए राउटर का उपयोग कर रहा था:

<Router basename={"/home"}>
    <Switch>
    <AuthenticateRoute
       path="/"
       exact={true}
       component={<Main component - change this>}
/></Router>

AuthenticateRoute घटक में, सत्यापित करें कि वैध समाप्ति तिथि वाला टोकन है।

class AuthenticatedRoute extends Component {
    render() {
       var isValidToken = false;
       const token = localStorage.getItem(USER_TOKEN);
       if (token === null) isValidToken = false;
       var decodedToken = jwt.decode(token, { complete: true });
       if (decodedToken.payload === null) isValidToken = false;
       //Get the current time in seconds.
       var dateNow = new Date();
       var nowDateSeconds = parseInt(dateNow.getTime() / 1000);
       //Check if token expiry time greater than current time (valid token)
       if (decodedToken.payload.exp > nowDateSeconds) {
            isValidToken = true;
       }
       if (isValidToken ) {
            return <Route {...this.props} />
        } else {
            return <Redirect to="/login" /> 
        }

    }
}

यदि टोकन मान्य नहीं है तो यह मुख्य पृष्ठ लोड नहीं होगा। नोट: यह कोड टोकन को अधिकृत/प्रमाणीकृत नहीं करता है। यह मुख्य घटक लोड करने से पहले जांचता है कि वैध दिनांकित टोकन मौजूद है या नहीं।

यहां ब्राउज़र में जेडब्ल्यूटी टोकन सत्यापन पर अधिक विवरण - प्रतिक्रिया - पोस्ट अनुरोध भेजने से पहले कैसे जांचें कि जेडब्ल्यूटी वैध है या नहीं?

0
Shankar P S 17 अप्रैल 2020, 19:42