X-neuron / antdFront

Antdfront is a set of multi tab experimental react microfrontend template
MIT License
202 stars 49 forks source link

登录态保持? #11

Closed superlbr closed 3 years ago

superlbr commented 3 years ago

登录后刷新就跳登录。。。

X-neuron commented 3 years ago

登录状态保持 一般实现方式 各样 ... 这个 一般根据自己要求,自行处理。如果需要实战样例, 可以提供一个jwt的样例:

atoms/login.js

export const loginStateAtom = atom({
  key: 'loginStateAtom',
  default: {
    role: null,
    id: null,
    name: localStorage.getItem('accountName'),
    account: localStorage.getItem('account'),
    accessToken: localStorage.getItem('xplat-token'),
    ssKey: null,
  },
});

pages/user/login/index.jsx

const [login, setLogin] = useRecoilState(loginStateAtom);

const handleSubmit = async (values) => {
    const res = await accountLogin(values);
    if (res?.data?.accessToken) {
      localStorage.setItem('xplat-token', res.data.accessToken);
      setLogin({
        ...res.data.user,
        name:res.data.user.userMess.name,
        accessToken: res.data.accessToken,
      });
      localStorage.setItem('account', res.data.user.account);
      localStorage.setItem('name', res.data.user.userMess.name);
      navigate('/user/center/messManager', { replace: true });
    }
  };

layout/security.jsx 加上修改为自己的逻辑判断即可持久化了。

const login = useRecoilValue(loginStateAtom);

if (!login.accessToken && window.location.pathname !== '/user/login') {
    return <Navigate to={`/user/login?${queryString}`} replace={true} />;
    // return <Redirect from="window.location.href" to="/user/login" />;
    // redirectTo(`/user/login?${queryString}`);
  }