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>

src/components/layout/SideBar.vue

@@ -1,12 +1,8 @@
 <template>
   <div>
     <el-menu router>
-      <el-menu-item
-        v-for="(route, index) in current_routes"
-        v-bind:key="index"
-        v-bind:index="route.path"
-        v-bind:title="route.meta?.name"
-      >{{ route.meta?.name }}</el-menu-item>
+      <el-menu-item v-for="(route, index) in current_routes" v-bind:key="index" v-bind:index="route.path"
+        v-bind:title="route.meta?.name">{{ route.meta?.name }}</el-menu-item>
     </el-menu>
   </div>
 </template>
@@ -15,23 +11,18 @@
 import { RouteRecordRaw } from "vue-router";
 import { store } from "../../store/index";
 import router from "../../router/index";
-import { reactive } from "vue";
 let current_routes = router.options.routes[0].children;
-console.log(router.options.routes[0].children);
-// let current_routes = reactive<Array<RouteRecordRaw>>(
-
-// );
-
-// console.log(so);
 </script>
 
 <style>
 closeStyle {
   width: 100px;
 }
+
 .side-main {
   width: 200px;
 }
+
 /* .el-menu-item {
   background-color: #01dfd7;
 } */

src/components/login/login.vue

@@ -20,14 +20,13 @@
     <div>
       微信/支付宝
     </div>
-    </el-card>
+  </el-card>
 
 </template>
 
 <script lang="ts" setup>
 import { reactive, ref } from 'vue'
 import type { FormInstance } from 'element-plus'
-import { authorize } from '../../api/user';
 import { useUserStore } from '../../store/user'
 import router from '../../router'
 const user = useUserStore()
@@ -58,7 +57,7 @@ const loginRules = reactive({
 })
 
 
-const dologin = (form: FormInstance) => {
+const dologin = (form: any) => {
 
   if (!form)
     return
@@ -77,14 +76,6 @@ const dologin = (form: FormInstance) => {
   })
 }
 
-const resetForm = (formEl: FormInstance | undefined) => {
-  if (!formEl) return
-  formEl.resetFields()
-}
-
-
-
-
 </script>
 <style scoped>
 .text {