Question

我正在学习javascript和mithril.js 1.1.6。我正在编写一个简单的Web应用程序，用户可以在其中登录页面。已经登录的用户将进入另一个页面。我正在尝试使用条件路由，这是主要组件：

const m = require("mithril");
...
import Eventbus from './whafodi/eventbus.js';
import WelcomePage from './ui/welcome.js';
import User from './model/user.js';
var eventbus = new Eventbus();
function MyApp() {
  return {
    usrAuth: function() {
      m.route(document.body, "/", {
        "/": { view: () => m("p", "hello")}
    })
  },
  usrNotAuth: function() {
    m.route(document.body, "/", {
      "/": { render: v => m(WelcomePage, eventbus) }
    })
  },
  oninit: function(vnode) {
    vnode.state.user = new User();
    eventbus.subscribe({
      type: "login",
      handle: function(action) {
        vnode.state.user.token = action.token;
        console.log(JSON.stringify(vnode.state.user));
      }
    });
  },
  view: function(vnode) {
    if(vnode.state.user.token) {
      this.usrAuth();
    } else {
      this.usrNotAuth();
    }
  }
}
};
m.mount(document.body, MyApp);

MyApp是主要组成部分。它检查用户是否具有令牌，然后返回正确的route。这是允许用户登录的组件：

const m = require("mithril");
const hellojs = require("hellojs");
function TopBar(node) {
  var bus = node.attrs.eventbus;
  function _login() {
    hellojs('facebook').login({scope:'email'});
  }
  return {
    oninit: function(vnode) {
      hellojs.init({
         facebook: XXXXXXX,
      }, {
         redirect_uri: 'http://localhost'
      });
      hellojs.on('auth.login', auth => {
        var fbtoken = auth.authResponse.access_token;
        m.request({
          method:"POST",
          url:"./myapp/login/fb/token",
          data:auth.authResponse,
          background: true
        }).then(function(result){
          console.log(result);
          bus.publish({ type: "login", token: result.jwttoken });
          m.route.set("/");
        }, function(error){
          console.log(error);
          bus.publish({ type: "login", token: "" });
        });
      });
    },
    view: function(vnode) {
      return m("div", [
        m("button", { onclick:  _login }, "Login")
      ]);
    }
  }
}
export default TopBar;

TopBar组件出现在主要组件中提到的WelcomePage组件中。 TopBar呈现一个按钮，并使用hello.js登录。它使用EventBus总线参数来告知已登录的主要组件用户（主要组件中有一个处理程序来更新用户模型）。用户登录后，将触发事件，并且主要组件将更新用户模型。好。现在，如何触发主要组件加载正确的路线？

Answer 1

我再次阅读了mithril'docs，发现RouteResolvers非常适合我的需求。这是一个示例：

var App = (function() {
  var login;
  function isLoggedIn(component) {
    if(login) {
      return component;
    } else {
      m.route.set("/hey");
    }
  }
  return {
    oninit: function(vnode) {
      EventBus.subscribe({
        type: "login",
        handle: function(action) {
          console.log("incoming action: " + JSON.stringify(action));
          login = action.value;
        }
      });
    },
    oncreate: function(vnode) {
      Foo.eventbus = EventBus;
      Bar.eventbus = EventBus;
      Hey.eventbus = EventBus;
      m.route(document.body, "/hey", {
        "/foo": {
          onmatch: function(args, requestedPath, route) { return isLoggedIn(Foo); }
        },
        "/bar": {
          onmatch: function(args, requestedPath, route) { return isLoggedIn(Bar); }
        },
        "/hey": Hey
      });
    },
    view: function(vnode) {
      return m("div", "home..");
    }
  };
})();

Eventbus用于使组件与App通信。它们触发App可以处理的事件（登录类型事件）。我发现以Eventbus方法所示的方式传递oncreate很方便，我可以在每个组件的Eventbus中使用oncreate来让组件触发事件。

Mitrhil.js条件路由和身份验证

1 个答案: