How AuthorizationLink Block is not cached in Magento 2

Question

I have created a block which is having login and account link. if customer is logged out it will show login link. if the customer logged in it will show logout url. If i enable the full page it is not working properly. Even if modify in that it is not getting reflected. Then i put cacheable="false" it works fine. But if i put cacheable="false" entire page become not cacheable. In default customer login link ( Magento\Customer\Block\Account\AuthorizationLink ) does not use any cacheable="false". How is that working?

Answer 1

Use Knockout.js: Knockout is working in full page cache also.
If a user is not logged in then customer().firstname returns null so it does what you expect.

<li class="minicart-nav-item" data-bind="scope: 'customer'">
<!-- ko if: customer().firstname -->
     <a class="customer-name" href="#">
        Sign Out <span data-bind="text: customer().firstname"></span>
    </a>
<!-- /ko -->

<!-- ko ifnot: customer().firstname -->
    <a class="customer-name" href="#">
        Sign In
    </a>
<!-- /ko -->
</li>

<script type="text/x-magento-init">
{
"*": {
    "Magento_Ui/js/core/app": {
        "components": {
            "customer": {
                "component": "Magento_Customer/js/model/customer"
            }
        }
    }
}
}
</script>

Answer 2

Use section data instead: http://devdocs.magento.com/guides/v2.1/config-guide/cache/cache-priv-priv.html

Never use cacheable="false"unless you want all page not to be full page cached (Varnish or built-in). This is what's for cacheable="false"