React应用中用户切回标签页/恢复浏览器时调用授权函数方案

Great question! This is a super common use case for keeping your React app's session secure, especially when users might step away and come back later. Let's break down how to implement this smoothly:

Modern browsers fire the visibilitychange event whenever the page's visibility state changes—this includes when a user switches back to your tab from another one, or opens a minimized browser window. We can hook into this event to trigger your authorization check.

Implementation for Functional Components (with Hooks) #

If you're using functional components, the useEffect hook is perfect for setting up and cleaning up the event listener. Here's a complete example:

import { useEffect } from 'react';

const YourAppComponent = () => {
  // Define your authorization function
  const authorizeUser = () => {
    console.log('Verifying user session...');
    // Add your actual logic here:
    // - Check if the auth token is still valid
    // - Refresh expired tokens
    // - Fetch updated user permissions
    // - Redirect to login if unauthorized
  };

  useEffect(() => {
    // Create the event handler
    const handlePageVisibilityChange = () => {
      // Only trigger authorization when the page becomes visible
      if (!document.hidden) {
        authorizeUser();
      }
    };

    // Attach the listener to the document
    document.addEventListener('visibilitychange', handlePageVisibilityChange);

    // Clean up the listener when the component unmounts to avoid memory leaks
    return () => {
      document.removeEventListener('visibilitychange', handlePageVisibilityChange);
    };
  }, [authorizeUser]); // Include authorizeUser in dependencies to keep the listener updated

  return (
    <div className="app-container">
      {/* Your app content goes here */}
    </div>
  );
};

export default YourAppComponent;

Implementation for Class Components #

If you're still working with class components, use the lifecycle methods componentDidMount and componentWillUnmount to manage the event listener:

import React, { Component } from 'react';

class YourAppComponent extends Component {
  // Authorization method
  authorizeUser = () => {
    console.log('Verifying user session...');
    // Add your authorization logic here
  };

  // Event handler
  handlePageVisibilityChange = () => {
    if (!document.hidden) {
      this.authorizeUser();
    }
  };

  componentDidMount() {
    // Attach listener when component mounts
    document.addEventListener('visibilitychange', this.handlePageVisibilityChange);
  }

  componentWillUnmount() {
    // Clean up listener when component unmounts
    document.removeEventListener('visibilitychange', this.handlePageVisibilityChange);
  }

  render() {
    return (
      <div className="app-container">
        {/* Your app content goes here */}
      </div>
    );
  }
}

export default YourAppComponent;

• Add Debouncing: If users rapidly switch tabs, you might trigger multiple authorization checks in quick succession. Add a debounce to prevent this (using Lodash's debounce or a custom implementation):

  // Example with Lodash debounce in a functional component
  import { useEffect, useCallback } from 'react';
  import { debounce } from 'lodash';
  
  const YourAppComponent = () => {
    const authorizeUser = useCallback(() => {
      // Authorization logic
    }, []);
  
    // Debounce the function to wait 500ms before triggering
    const debouncedAuthorize = useCallback(debounce(authorizeUser, 500), [authorizeUser]);
  
    useEffect(() => {
      const handleVisibilityChange = () => {
        if (!document.hidden) {
          debouncedAuthorize();
        }
      };
  
      document.addEventListener('visibilitychange', handleVisibilityChange);
  
      return () => {
        document.removeEventListener('visibilitychange', handleVisibilityChange);
        debouncedAuthorize.cancel(); // Cancel pending calls on unmount
      };
    }, [debouncedAuthorize]);
  
    // ... rest of component
  };
  

• Global Listening: To apply this across your entire app, add the listener in your root App component instead of individual components—this ensures every page reactivation triggers the check.

内容的提问来源于stack exchange，提问作者Mohammad Quadri