我正在尝试设置一个只有用户“级别”大于 2 的人才能访问的管理页面。我正在使用 MobX 和 React-Router。问题很可能是因为我不知道如何正确连接到 MobX 商店。我正在导入一个函数 isAdmin,它位于 routes.js 的单独文件中。该函数如下所示:
export const isAdmin = (nextState, replace) => {
const user = this.context.store.auth.user;
if (user.level < 2 || !user) {
replace({
pathname: '/',
});
}
};
这大致基于位于 here 的 react-router 的 gitHub 页面的最后一个示例。 .
感谢您的帮助!
最佳答案
这link解释什么是 Context
对象以及在哪里使用它。 `isAdmin' 函数需要访问您的 Store 类才能获得用户级别。
创建一个 AuthStore (/stores/auth.js) -
import { observable, computed } from 'mobx';
import singleton from 'singleton';
export default class Auth extends singleton {
@observable user = null;
@computed get isLoggedIn() {
return !!this.user;
}
login(username, password) {
return post('/api/auth/login', {
username, password
})
.then((res) => {
this.user = res.data.user;
return res;
});
}
logout() {
Storage.remove('token');
return get('/api/auth/logout');
}
}
在您的路由文件中,您可以导入 AuthStore 并像这样使用它
import React from 'react';
import { Route, IndexRoute } from 'react-router';
import Auth from './stores/Auth'; // note: we can use the same store here..
function authRequired(nextState, replace) {
if (!Auth.isLoggedIn) {
replace('/login');
}
}
export default (
<Route name="root" path="/" component={App}>
<Route name="login" path="login" component={Login} />
<Route name="admin" path="admin" onEnter={authRequired} component={Admin}>
<IndexRoute name="dashboard" component={Dashboard} />
</Route>
</Route>
);
这stackoverflow问题应该给你更多信息
关于javascript - 带有 Mobx 的 React-Router 中间件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39668982/