Polymer登录页隐藏抽屉报错：Cannot read 'persistent' of undefined

这个错误我之前在Polymer项目里也碰到过！问题出在dom-if模板的特性上——当[[_isLogin()]]条件为真时，app-drawer会被从DOM里完全移除，而你的代码里肯定有某个地方在尝试访问这个抽屉元素的persistent属性（可能是你自己写的逻辑，也可能是app-layout相关的内部逻辑），这时候因为元素已经不存在了，自然就会抛出Cannot read property 'persistent' of undefined的错误。

下面是两种可行的解决办法：

方法一：用hidden属性替代dom-if隐藏抽屉 #

hidden属性只会让元素不可见，但不会将其从DOM中移除，这样抽屉元素始终存在，访问它的属性就不会报错了。修改你的代码如下：

<!-- Drawer content -->
<app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]" hidden="[[_isLogin()]]">
  <app-toolbar>Menu</app-toolbar>
  <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
    <a name="homepage" href="/homepage">Home</a>
    <!-- 其他菜单选项 -->
  </iron-selector>
</app-drawer>

方法二：保留dom-if，但先检查元素是否存在再访问属性 #

如果你一定要用dom-if来移除抽屉元素，那必须确保在访问drawer的属性前先判断它是否存在。比如在你的脚本逻辑里：

// 假设你有操作抽屉的逻辑，先检查元素是否存在
if (this.$.drawer) {
  // 安全地访问persistent属性或其他操作
  this.$.drawer.persistent = false;
}

如果你的Polymer版本支持ES6+的可选链语法，也可以简化成：

this.$.drawer?.persistent = false;

另外需要注意：有些app-layout相关的组件可能依赖app-drawer始终存在于DOM中，这种情况下优先选择方法一，避免破坏组件间的依赖关系。

内容的提问来源于stack exchange，提问作者Vipul Solanki