login 功能

src/components/layout/NavBar.vue

@@ -2,43 +2,57 @@
   <div class="nav-main">
     当前时间：{{ time }}
     <span>论一个程序员的寂寞与忧伤</span>
-    <span>{{ user.name }}</span>
-
-    <el-button icon="open_side" circle></el-button>
-    <el-dropdown>
-      <i class="el-icon-setting" style="margin-right: 15px"></i>
-      <!-- <el-dropdown-menu slot="dropdown">
-        <el-dropdown-item>查看</el-dropdown-item>
-        <el-dropdown-item>新增</el-dropdown-item>
-        <el-dropdown-item>删除</el-dropdown-item>
-      </el-dropdown-menu>-->
+    <el-dropdown trigger="click" v-show="user.owner">
+      <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item>profile</el-dropdown-item>
+          <el-dropdown-item @click="dialogVisible = true">退出</el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
     </el-dropdown>
-    <span @click="doLogin" v-show="!user.name">登录</span>  </div>
+    <span @click="doLogin" v-show="!user.owner">登录</span>
+  </div>
+  <el-dialog v-model="dialogVisible" title="提示" width="30%">
+    <span>确认你的登出操作么？</span>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="doLogout">确认</el-button>
+      </span>
+    </template>
+  </el-dialog>
 </template>
 
 <script setup lang='ts'>
 import $moment from "moment";
-import { ref } from "vue";
+import { reactive, ref } from "vue";
 import router from '../../router'
 import { useUserStore } from '../../store/user'
-
-const getTime = () => {
-  return $moment().format("YYYY年MM月DD日　HH:mm:ss");
-};
-
-let time = ref<String>(getTime());
+// obtain user infomation 
 const user = useUserStore()
+user.reflush()
+const dialogVisible = ref(false)
 
-const timeChange = () => {
-  time.value = getTime();
-};
-setInterval(timeChange, 1000);
+// show time 
+let time = ref<String>($moment().format("YYYY年MM月DD日  HH:mm:ss"));
+setInterval(() => {
+  time.value = $moment().format("YYYY年MM月DD日  HH:mm:ss");
+}, 1000);
 
+// login logout function
 const doLogin = () => {
   router.push({
     path: '/login'
   })
 }
+const doLogout = () => {
+  dialogVisible.value = false
+  user.logout()
+  router.push({
+    path: '/home'
+  })
+}
 </script>
 
 <style>