Javascript 让用户在浏览器关闭时登录，而不是在刷新时

我想在用户需要时“让用户登录”。这样用户就不必每次访问网站时都登录

我是这样做的。 1.当用户单击“让我登录”按钮时，“keepLoggedIn”状态在redux存储中设置为“true”，并使用“redux持久化”将其持久化到本地存储中。 2.在App.js中，使用window.onunload（）检测窗口/选项卡关闭，如果“keepLoggedIn”状态为“false”，则清除localStorage，这将注销用户

• 发行 onunload（）还检测窗口刷新和重新加载。这会让用户注销

• 一些想法

• 有些人建议添加按键条件来检测刷新。但当他点击浏览器上的刷新页面按钮时，这还不包括在内

• 使用window.onload（这意味着在每次刷新和重新加载页面时都发出HTTPS请求）再次检查JWT令牌以登录用户将是一种过分的做法

使用window.onunload可能不是正确的方法。是否有正确且更好的工作流程

App.js 为了有条件地使用sessionStorage，我需要找到一种在存储配置中获取redux状态的方法。 “get.store（）”不起作用，因为需要在存储之前配置persist

const persistConfig = {
      key: 'root',
      keepLoggedIn ? storage : sessionStorage,
    };

---

对于一个可能和我有同样问题的人。 我解决了这个问题，按照@Jb31的建议，使用sessionStorage表示“不要让我登录”，使用localStorage表示“让我登录”

以下是我的工作方式

单击“保持我登录”复选框时，将redux存储中的“keepLoggedIn”状态（布尔值）更改为true

如果“不让我继续登录”，单击“登录提交”按钮时，将“keepLoggedIn”状态保存在会话存储中

• 注意：我使用的是redux persist。因此“keepLoggedIn”状态会自动保存到本地存储中

下面是当用户“keepLoggedIn”为false时检测浏览器刷新的方法。 创建一个HOC并将其添加到路由中，以便在呈现您希望保护的任何网页之前呈现此HOC。 检查用户是否重新打开浏览器，如果是，则重置身份验证状态并清除localStorage以注销用户。 否则，只返回一个组件来呈现页面

• 如果sessionStorage为空，则表示浏览器已重新打开（未刷新）

• 我还检查“isLoggedIn”状态（用户登录时设置为true）是否为false，以确保在用户登录时不注销用户

routeGuards.js

class LoginAuth扩展了React.Component{
组件willmount（）{
常数{
基普洛格丁，
伊斯洛格丁，
用户注销，
历史
}=这是道具；
如果(
（！keepLoggedIn&！sessionStorage.getItem（'keepLoggedIn'））|
！伊斯洛格丁
) {
userLogout（）；
清除存储（）；
返回history.push（'/login'）；
}
}
render（）{
返回；
}
}

routes.js

const routes=props=>(
);

sessionStorage用于“不让我登录”和

localStorage

用于“让我登录”怎么样？这是个好主意！但我不确定如何获取“keepLoggedIn”（布尔值）在配置存储之前先说明存储中的配置。这样我就可以有条件地配置持久存储。你能给我一些建议吗？谢谢@Jb31

import { applyMiddleware, createStore } from 'redux';
import thunkMiddleware from 'redux-thunk';
import { createLogger } from 'redux-logger';
import { composeWithDevTools } from 'redux-devtools-extension';
import { routerMiddleware, connectRouter } from 'connected-react-router';
import createBrowserHistory from 'history/createBrowserHistory';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import storageSession from 'redux-persist/lib/storage/session';
import rootReducer from './src/reducers';

export const history = createBrowserHistory();

const middlewares = [
  routerMiddleware(history),
  thunkMiddleware,
  createLogger({
    predicate: () => process.env.NODE_ENV === 'development',
    collapsed: true,
  }),
];
const enhancers = [applyMiddleware(...middlewares)];

const persistConfig = {
  key: 'root',
  storage,
};

const persistedReducer = persistReducer(
  persistConfig,
  rootReducer(history), 
);

export default function configureStore(preloadedState) {
  const store = createStore(
    persistedReducer,
    preloadedState,
    composeWithDevTools(...enhancers),
  );
  const persistor = persistStore(store);
  return { store, persistor };
}

const persistConfig = {
      key: 'root',
      keepLoggedIn ? storage : sessionStorage,
    };

const saveUserToken = (token, keepLoggedIn) => { 
  localStorage.setItem('token', token);

  return !keepLoggedIn ? 
    sessionStorage.setItem('keepLoggedIn',keepLoggedIn): null;
};

  class LoginAuth extends React.Component {
    componentWillMount() {
      const {
        keepLoggedIn,
        isLoggedIn,
        userLogout,
        history,
      } = this.props;
      if (
        (!keepLoggedIn && !sessionStorage.getItem('keepLoggedIn')) || 
        !isLoggedIn
      ) {
        userLogout();
        clearStorage();
        return history.push('/login');
      }
    }

    render() {
      return <Component {...this.props} />;
    }
  }

const routes = props => (
  <div>
    <App history={props.history} />
    <Switch>
      <Route exact path="/" component={Home} />
      <LoggedOutRoute path="/login" component={Login} />
      <LoggedOutRoute path="/auth/forgot" component={Forgot} />
      <Route path="/reset" component={Reset} />
      <Route
        exact
        path="/user/account/me"
        component={RouteGuards(UserAccount)}
      />
      <Route component={NoMatch} />
    </Switch>
  </div>
);