基于firebase身份验证限制Javascript中的路由答案

【问题标题】：Restrict Routes in Javascript based on firebase authentication基于firebase身份验证限制Javascript中的路由
【发布时间】：2018-05-23 23:44:29
【问题描述】：

我正在构建一个 javascript 应用程序。此应用程序正在使用一个名为 jq-router 的插件。当我执行以下操作时，地址栏会更改，但视图无法更改。

$.router.onRouteBeforeChange(function(e, route, params){
    firebase.auth().onAuthStateChanged(function(user){
        if(!user && route.protected) {
            $.router.go('landing', {}); <!-- This line calls the plugin.
        }
    });
});

上面调用的插件中的函数如下所示。

/**
 * Navigates to given route name & params
 * @params {string} routeName
 * @params {object} params
 * @return {object} this
 */
s.go = function(routeName, params) {
    var s = this;
    paramSrv.setParams(params);
    window.location = s.href(routeName, params);
    return s;
};

您可以在此处访问整个插件：https://github.com/muzammilkm/jq-router

同样，预期结果是视图和地址栏更新。目前唯一更新的是地址栏，视图仍然呈现。

【问题讨论】：

标签： javascript firebase routing firebase-authentication

【解决方案1】：

您应该使用 onViewChange/onRouteChanged 事件并排除着陆路线以避免循环。 onRouteBeforeChange 事件是为了通知路由即将发生变化，这样如果有任何清理操作都可以进行。

$.router.onViewChange(function(e, viewRoute, route, params){
    firebase.auth().onAuthStateChanged(function(user){
        if(!user && route.name !== "landing" && route.protected) {
            $.router.go('landing', {}); <!-- This line calls the plugin.
        }
    });
});

【讨论】：