1

ユーザーの「レベル」が 2 を超えるユーザーのみがアクセスできる管理ページを設定しようとしています。MobX と React-Router を使用しています。問題は、MobX ストアに正しく接続する方法がわからないという事実に基づいている可能性があります。routes.jsとは別のファイルにある関数isAdminをインポートしています。関数は次のようになります。

export const isAdmin = (nextState, replace) => {
    const user = this.context.store.auth.user;
    if (user.level < 2 || !user) {
        replace({
            pathname: '/',
        });
    }
};

これは、ここにあるreact-routerの gitHub ページの最後の例に大まかに基づいています。

助けてくれてありがとう！

4

1 に答える 1

5

このリンク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>
);

このスタックオーバーフローの質問により、より多くの情報が得られるはずです

于 2016-09-24T08:33:07.673 に答える