reactjs - 如何确保在 React/Redux 路由器重定向之前发生 JWT 验证?
问题描述
我正在使用 React/Redux、Knex + Objection.Js + PostgreSQL 为 DB 和 feathersjs 为 API 框架开发一个全栈 PERN 应用程序。因此,我@feathersjs/client
也在前端及其身份验证包上使用。我也connected-react-router
用于我的路由。不幸的是,每当我尝试导航到受保护的路由时,负责设置用户状态的“登录”请求(从他们向服务器进行的 jwt 身份验证)在重定向将用户带到登录页面之前不会完成。
我index.js
通过调度一个动作来验证反应应用程序文件中的 jwt。
if (localStorage['feathers-jwt']) {
try {
store.dispatch(authActions.login({strategy: 'jwt', accessToken: localStorage.getItem('feathers-jwt')}));
}
catch (err){
console.log('authenticate catch', err);
}
}
动作被拾取redux-saga
,执行以下动作
export function* authSubmit(action) {
console.log('received authSubmit');
try {
const data = yield call(loginApi, action);
yield put({type: authTypes.LOGIN_SUCCESS, data});
} catch (error) {
console.log(error);
yield put({type: authTypes.LOGIN_FAILURE, error})
}
}
function loginApi(authParams) {
return services.default.authenticate(authParams.payload)
}
这是我isAuthenticated
的配置对象函数:
const isAuthenticated = connectedReduxRedirect({
redirectPath: '/login',
authenticatedSelector: state => state.auth.user !== null,
redirectAction: routerActions.replace,
wrapperDisplayName: 'UserIsAuthenticated'
});
这是应用于容器组件的 HOC
const Login = LoginContainer;
const Counter = isAuthenticated(CounterContainer);
const LoginSuccess = isAuthenticated(LoginSuccessContainer);
最后,这是渲染
export default function (store, history) {
ReactDOM.render(
<Provider store={store}>
<ConnectedRouter history={history}>
<Switch>
<Route exact={true} path="/" component={App}/>
<Route path="/login" component={Login}/>
<Route path="/counter" component={Counter}/>
<Route path="/login-success" component={LoginSuccess}/>
<Route component={NotFound} />
</Switch>
</ConnectedRouter>
</Provider>,
document.getElementById('root')
);
}
例如,在登录和访问时,我期望发生/counter
的情况如下
LOGIN_REQUEST 操作已触发
触发 LOGIN_SUCCESS 操作,用户通过 JWT 身份验证
路由器看到 user.auth 对象不为空,因此用户已通过身份验证
路由器允许导航而无需重定向
我看到的是以下内容(手动导航到时/counter
)
@@在里面
auth/LOGIN_REQUEST [这很好,
loggingIn: true
]@@router/LOCATION_CHANGE
{
type: '@@router/LOCATION_CHANGE',
payload: {
location: {
pathname: '/counter',
search: '',
hash: ''
},
action: 'POP',
isFirstRendering: true
}
}
- @@router_LOCATION_CHANGE [这是问题]
type: '@@router/LOCATION_CHANGE',
payload: {
location: {
pathname: '/login',
hash: '',
search: '?redirect=%2Fcounter',
key: 'kdnf4l'
},
action: 'REPLACE',
isFirstRendering: false
}
}
用户导航到
/login
,这会按照当前设计将用户注销。LOGOUT_REQUEST -> LOGIN_SUCCESS -> LOCATION_CHANGE(到
/login-success
)
再次,任何帮助将不胜感激,我可以根据需要提供任何其他内容。
谢谢!
-布伦登
解决方案
Solution
I was able to solve this today by taking a look at how the authentication package feathers-reduxify-authentication
function. The redirect was, for the most part, configured correctly.
BACKEND
authentication.js
Note multiple strategies, and how the context.result is returned. This is necessary for feathers-reduxify-authentication
to work properly.
module.exports = function (app) {
const config = app.get('authentication');
// Set up authentication with the secret
app.configure(authentication(config));
app.configure(jwt());
app.configure(local(config.local));
app.service('authentication').hooks({
before: {
create: [
authentication.hooks.authenticate(config.strategies),
],
remove: [
authentication.hooks.authenticate('jwt')
]
},
after: {
create: [
context => {
context.result.data = context.params.user;
context.result.token = context.data.accessToken;
delete context.result.data.password;
return context;
}
]
}
});
};
FRONTEND
src/feathers/index.js
This is according to eddystop's example project, but upgraded to feathers 3.0+
import feathers from '@feathersjs/client';
import io from 'socket.io-client';
import reduxifyAuthentication from 'feathers-reduxify-authentication';
import reduxifyServices, { getServicesStatus } from 'feathers-redux';
import { mapServicePathsToNames, prioritizedListServices } from './feathersServices';
const hooks = require('@feathersjs/client');
const socket = io('http://localhost:3030');
const app = feathers()
.configure(feathers.socketio(socket))
.configure(hooks)
.configure(feathers.authentication({
storage: window.localStorage
}));
export default app;
// Reduxify feathers-client.authentication
export const feathersAuthentication = reduxifyAuthentication(app,
{ authSelector: (state) => state.auth.user}
);
// Reduxify feathers services
export const feathersServices = reduxifyServices(app, mapServicePathsToNames);
export const getFeathersStatus =
(servicesRootState, names = prioritizedListServices) =>
getServicesStatus(servicesRootState, names);
middleware and store. src/state/configureStore
redux-saga is temporarily removed, I'll be bringing it back once I finish testing
import { createBrowserHistory } from 'history';
import { createStore, applyMiddleware, compose } from "redux";
import { routerMiddleware } from 'connected-react-router';
import createRootReducer from './ducks';
import promise from 'redux-promise-middleware';
import reduxMulti from 'redux-multi';
import rootSaga from '../sagas';
import createSagaMiddleware from 'redux-saga';
export default function configureStore(initialState) {
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
|| compose;
const middlewares = [
//sagaMiddleware,
promise,
reduxMulti,
routerMiddleware(history)];
const store = createStore(
createRootReducer(history),
initialState,
composeEnhancer(
applyMiddleware(
...middlewares
)
)
);
return store;
}
root reducers, src/state/ducks/index.js
import { combineReducers } from "redux";
import { connectRouter } from 'connected-react-router';
import { reducer as reduxFormReducer } from 'redux-form';
import {feathersAuthentication, feathersServices} from '../../feathers';
import counter from './counter';
const rootReducer = (history) => combineReducers({
counter,
router: connectRouter(history),
users: feathersServices.users.reducer,
auth: feathersAuthentication.reducer,
form: reduxFormReducer, // reducers required by redux-form
});
export default rootReducer;
推荐阅读
- python - how handle this error that i am facing when trying to write from SQL to Kudu via Pyspark
- xml - 递归定义元素内的 XSD 元素
- java - 如何在两个不同的类中使用相同的方法(带有 Scenebuilder 的 JavaFX)?
- movesense - Movesense:如何确定 mac os x 上的 wbcmd 端口
- php - 插入表 - 用数组替换列名和值
- database - Azure WP 应用服务 - 我想克隆我的网站
- c# - 从 null 隐式转换
- javascript - JavaScript file with useful constants shared by many modules in modern JS
- html - IndexedDB - 带有任意键列表的简单索引上的 IDBKeyRange
- javascript - 在 Node.js 中注册时如何与 MySQL DB 信息进行重复比较