Я использую систему частной маршрутизации реактивного маршрутизатора. Я проверяю аутентификацию, получая jwt из localstorage и перекрестную проверку на сервере в обещание Axios.
Однако частная маршрутизация, похоже, не ждет возврата обратного вызова. Я неправильно выполняю аутентификацию? или есть способ исправить это?
мои аксиомы обещают проверить авторизацию.
const checkAuth = (cb) => {
let token = localStorage.getItem("jwtToken");
// console.info(token);
if (token) {
axios.defaults.headers.common["Authorization"] = token;
axios
.get("api/admin/auth/profile")
.then(res => {
localStorage.setItem("admin", res.data.admin);
cb(null, res.data);
})
.catch(err => {
showErr(err, cb);
});
} else {
cb("Not authenticated", null);
}
}
Установлен частный маршрут.
const PrivateRoute = ({ component: Component, ...rest, checkAuth }) =>
(
<Route {...rest} render = {(props) => (
checkAuth((isAuthenticated) => (
isAuthenticated === true
? <Component {...props} />
: <Redirect to = {{
pathname: '/login',
state: { from: props.location }
}} />
))
)} />
)
Метод checkAuth
ничего не возвращает. Функция рендеринга должна возвращать компонент. Я бы предложил создать такой компонент CheckAuth с отслеживанием состояния.
class CheckAuth extends React.Component {
state = {}
componentDidMount () {
this.props.checkAuth(isAuthenticated => {
this.setState({isAuthenticated})
})
}
render () {
return this.props.children({loading, isAuthenticated})
}
}
const PrivateRoute = ({ component: Component, ...rest, checkAuth }) =>
(
<Route {...rest} render = {(props) =>
<CheckAuth {...props} checkAuth = {checkAuth}>
{({isAuthenticated}) => (
isAuthenticated === true
? <Component {...props} />
: <Redirect to = {{
pathname: '/login',
state: { from: props.location }
)}
</CheckAuth>
)}</Route>
}