如何通过react-token-auth回调设置redux状态

yxyvkwin  于 2023-02-08  发布在  React
关注(0)|答案(1)|浏览(131)

我正在做一个使用react-token-auth的项目,它是从一个顶级函数配置和导出的,我唯一缺少的是如何获得用户名,电子邮件等。存储到redux中,以便在整个应用程序中使用。我的方法是解码JWT令牌,并将其存储在onHydration钩子内。但我无法在react组件之外进行调度。正确的方法是什么?我的代码如下所示:

import { createAuthProvider } from 'react-token-auth';
import jwt_decode from 'jwt-decode'
import { useDispatch } from 'react-redux'
import { setName } from '../store/userSlice';

const dispatch = useDispatch()

export const { useAuth, authFetch, login, logout } =
    createAuthProvider({
        getAccessToken: session => session.access_token,
        storage: localStorage,
        onHydratation: (session) => {
            const decoded = jwt_decode(session.access_token)
            console.log('decoded', decoded)
            dispatch(setName('decoded'))
        },
        onUpdateToken: (token) => fetch('/api/refresh', {
            method: 'POST',
            body: token.access_token
        })
            .then(r => {
                r.json().then(a => {
                    if (!a.error) {
                        return a
                    }
                    else
                        logout()
                })
            })
    });

谢谢!

c86crjj0

c86crjj01#

由于此代码在React外部运行,而不是在任何React组件中运行,因此您将无法使用useDispatch钩子或react-redux中的任何内容。导入示例化的Redux store对象,并直接向存储分派操作。
示例:

import { createAuthProvider } from 'react-token-auth';
import jwt_decode from 'jwt-decode';
import { store } from '../path/to/store';
import { setName } from '../store/userSlice';

export const { useAuth, authFetch, login, logout } = createAuthProvider({
  getAccessToken: session => session.access_token,
  storage: localStorage,
  onHydratation: (session) => {
    const decoded = jwt_decode(session.access_token);
    console.log('decoded', decoded);
    store.dispatch(setName(decoded));
  },
  onUpdateToken: (token) => fetch('/api/refresh', {
    method: 'POST',
    body: token.access_token
  })
    .then(r => r.json())
    .then(a => {
      if (!a.error) {
        return a;
      }
      logout();
    })
});

相关问题