Question

我的MEAN应用程序中的模板缓存有些困难。我有一个导航栏，它使用条件逻辑来显示/隐藏显示给用户的按钮。当用户点击页面时，值将设置为null或false，但一旦登录，这些值将更改（views，isLoggedIn）

我的问题是这个 - 当我第一次点击页面时，值会按预期设置为null / false，并且隐藏按钮。

但是，成功登录后，角度登录控制器正在通过$location.path("/pathAfterLogin");进行重定向，并将用户带到正确的状态但使用隐藏按钮。只有在我进行硬刷新（control-f5）后，页面才会刷新并根据app.js文件中设置的值显示相应的按钮。

我正在使用Angular 1.5，UI-Router，Express 4，Swig templates和consolidate模板引擎。 NODE.ENV将开发。

我也尝试过每个我能想到的地方禁用缓存。

我的app.js文件如下所示：

'use strict';

var express = require('express'),
    path = require('path'),
    cons = require('consolidate'),
    swig = require('swig');


module.exports = function() {
    var app = express(); //start an express app app.disable('view cache');

    app.engine('html', cons.swig);

    app.set('view engine', 'html');
    app.set('views',path.join(__dirname,'../app/views'));
    app.set('view cache', false ); //set cache

    swig.setDefaults({ cache: false });

    app.get('*', stuff.test, function(req, res, next) {
        res.setHeader('Cache-Control', 'no-cache');
        res.render('index', {
            cache: false,
            views: req.views,
            isLoggedIn: req.isLoggedIn
        });
    });
        return app;
};

HTML文件是我的主要布局/视图，因为这是打开URL重新编写的单页面应用程序。下面的index.html文件也是，包括导航文件。

<!doctype html>
<html ng-app="myapp" ng-cloak xmlns="http://www.w3.org/1999/html">
<head>
    <base href="/" />
    ( truncated ... )
</head>

<body>
<header>{% include "../../public/templates/header.html" %}</header>
<header>{% include "../../public/templates/navigation.html" %}</header>
<div class="res whitespace">

        <ui-view/>
</div>

</body>
<script src = "angular.js"></script>
<script src = "loginCtrl.js"></script>
<script src = "loginSrvc.js"></script>
</html>

包含的导航文件：

<div id="subtitle">
    <ul class="nav nav-pills pull-right">
        {% if !isLoggedIn %}<li ui-sref-active="active"><a ui-sref="login">Login</a></li>{% endif %}
        {% if isLoggedIn %}<li ui-sref-active="active"><a ui-sref="logout">Logout</a></li>{% endif %}
        {% for item in views %}
            {% if item == "linkA" %}<li ui-sref-active="active"><a ui-sref="linkA">LinkA</a></li>{% endif %}
            {% if item == "LinkB" %}<li ui-sref-active="active"><a ui-sref="linkB">LinkB</a></li> {% endif %}
        {% endfor %}
        {% if !isLoggedIn %}<li ui-sref-active="active"><a ui-sref="info">Info </a></li>{% endif %}
        <li class="dropdown"ui-sref-active="active">
            {% for item in views %}
                {% if resource == "mainDD" %} <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Drop Downs <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                    {% for item in permissions %}
                        {% if item == "link1" %}<li><a ui-sref="link1">Link 1</a></li>{% endif %}
                        {% if item == "link2" %}<li><a ui-sref="link2">Link 2</a></li>{% endif %}
                        {% endfor %}
                    </ul>
                {% endif %}
            {% endfor %}
        </li>
    </

UL＆GT;

我有两个问题：

缓存是否已正常关闭？如果没有，我哪里错了？
关闭缓存时，这是预期的行为吗？

Answer 1

问题在于您将后端模板与前端路由混合：

{% if isLoggedIn %}<li ui-sref-active="active"><a ui-sref="logout">Logout</a></li>{% endif %}

isLoggedIn是一个服务器端变量，用于确定是否应在生成的HTML中显示其内容（<li>）。

如果用户在生成HTML时没有登录，则只有完整（服务器端）重新呈现模板才会导致＆＃34; Logout＆＃34; < / em>按钮显示在提供给浏览器的HTML中。

要解决此问题，您需要重新加载页面（我很久没有使用Angular了，但$window.location.reload()曾经工作过），因此服务器有机会提供更新的HTML。

或者，您可以考虑将模板逻辑移动到是否向Angular显示特定页面元素：

<li ng-if="loggedIn" ui-sref-active="active"><a ui-sref="logout">Logout</a></li>

（其中loggedIn是控制器中的变量）

要明确：这与缓存无关。在Express中查看缓存不会缓存渲染的模板（即HTML），但编译的模板（通常，模板必须从文件中读取，处理或＃34;编译＆＃34 ;，然后它就可以用来渲染了。）

模板缓存ExpressJS

1 个答案: