13、支持中心项目开发全流程详解

支持中心项目开发全流程详解

1. 用户菜单添加

在 NavMenu.vue 文件中添加与用户相关的功能。为了让这些功能显示在菜单最右侧，我们在已有的路由链接后添加如下元素：

<div class="spacer"></div>

这个元素会利用 CSS 的 flexbox 属性占据菜单中的所有可用空间，从而将后续内容推到右侧。借助之前在“将用户存储在集中状态”部分创建的插件，我们可以通过 $state 属性访问全局状态，该状态包含用户对象，可判断用户是否登录，并显示用户名和注销链接。在 NavMenu.vue 组件中添加用户菜单：

<template v-if="$state.user">
  <a>{
  
  { $state.user.username }}</a>
  <a @click="logout">Logout</a>
</template>

若用户未登录，在上述模板下方添加登录链接：

<router-link v-else :to="{name: 'login'}">Login</router-link>

注销链接需要一个新的注销方法，代码如下：