vue3前端开发-小兔鲜项目-登录和非登录状态下的模板适配

vue3前端开发-小兔鲜项目-登录和非登录状态下的模板适配！有了上次的内容铺垫，我们可以根据用户的token来判定，到底是显示什么内容了。

---

1：我们在对应的导航组件内修改完善一下内容即可。

<script setup>
import { useUserStore } from '@/stores/user';
const userStore = useUserStore()
</script><template><nav class="app-topnav"><div class="container"><ul><!--多模板渲染区分用户登录状态--><template v-if="userStore.userInfo.token"><li><a href="javascript:;"><i class="iconfont icon-user"></i>{{userStore.userInfo.account}}</a></li><li><el-popconfirm title="确认退出吗?" confirm-button-text="确认" cancel-button-text="取消"><template #reference><a href="javascript:;">退出登录</a></template></el-popconfirm></li><li><a href="javascript:;">我的订单</a></li><li><a href="javascript:;">会员中心</a></li></template><template v-else><li><a href="javascript:;" @click="$router.push('/login')">请先登录</a></li><li><a href="javascript:;">帮助中心</a></li><li><a href="javascript:;">关于我们</a></li></template></ul></div></nav>
</template><style scoped lang="scss">
.app-topnav {background: #333;ul {display: flex;height: 53px;justify-content: flex-end;align-items: center;li {a {padding: 0 15px;color: #cdcdcd;line-height: 1;display: inline-block;i {font-size: 14px;margin-right: 2px;}&:hover {color: $xtxColor;}}~li {a {border-left: 2px solid #666;}}}}
}
</style>

---

2：主要是，第一步导入我们刚刚定义的pinia内容。

然后再补充完善一下，对应的v-if判定参数。

有这个判定后，就可以根据token信息，来判定，到底是显示什么内容了。

非常方便。如果没有这个token，就会显示第二个模板的内容《提示用户请先登录》