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 {

src/main.ts

@@ -29,9 +29,15 @@ if (url != 'http://localhost:3000/' && url.search("blog=") != -1) {
   })
 }
 router.beforeEach((to, from, next) => {
-  console.log(to.path, from.path)
+  console.log(from.path, to.path)
+
+  const token = getToken()
   if (to.path === '/login') {
-    next()
+    if (token) {
+      next('/home')
+    } else {
+      next()
+    }
   }
 
 

src/store/user.ts

@@ -1,6 +1,6 @@
 import { defineStore, acceptHMRUpdate } from 'pinia'
 import { authorize } from '../api/user'
-import { getToken, setToken, resetToken, setUserInfo } from '../utils/auth'
+import { getToken, setToken, resetToken, setUser, getUser } from '../utils/auth'
 
 /**
  * Simulate a login
@@ -13,11 +13,17 @@ import { getToken, setToken, resetToken, setUserInfo } from '../utils/auth'
 //   return Promise.reject(new Error('invalid credentials'))
 // }
 
+type User = {
+  id: string,
+  username: string
+}
+
 export const useUserStore = defineStore({
   id: 'user',
   state: () => ({
     name: '',
     token: '',
+    owner: false
   }),
 
   getters: {
@@ -28,8 +34,9 @@ export const useUserStore = defineStore({
       this.$patch({
         name: '',
         token: '',
+        owner: false
       })
-
+      resetToken()
       // we could do other stuff like redirecting the user
     },
 
@@ -43,10 +50,12 @@ export const useUserStore = defineStore({
       if (userData.data.token) {
         this.$patch({
           name: user_id,
+
           ...userData.data,
+          owner: true
         })
         setToken(userData.data.token)
-        setUserInfo(userData)
+        setUser(userData)
         console.log('authorize success!')
       }
       return new Promise((resolve, reject) => {
@@ -57,6 +66,17 @@ export const useUserStore = defineStore({
         }
       })
     },
+    async reflush() {
+      if (getToken()) {
+        const user = <User>(JSON.parse(getUser() as string))
+        const token = <string>getToken()
+        this.$patch({
+          name: user.id,
+          token: token,
+          owner: true
+        })
+      }
+    }
   },
 })
 

src/utils/auth.ts

@@ -1,20 +1,24 @@
 import Cookies from 'js-cookie'
 
 const getToken = () => {
-  const token = Cookies.get('token')
-  return token
+  return Cookies.get('token')
 }
 
 const setToken = (token: String) => {
   Cookies.set('token', token)
 }
 
-const setUserInfo = (userinfo: any) => {
-  Cookies.set('userinfo', userinfo)
+const setUser = (user: object) => {
+  Cookies.set('user', JSON.stringify(user))
 }
 
-const resetToken = (token: String) => {
-  Cookies.set('token', "")
+const getUser = () => {
+  return Cookies.get('user')
 }
 
-export { getToken, setToken, resetToken, setUserInfo }
+const resetToken = () => {
+  Cookies.remove('token')
+  Cookies.remove('user')
+}
+
+export { getToken, setToken, resetToken, setUser, getUser }

src/view/bookmark/index.vue

@@ -17,7 +17,7 @@
       </div>
     </el-form>
     <div class="create_dialog">
-      <el-button type="primary" @click="handleInsert">新建</el-button>
+      <el-button type="primary" @click="handleInsert" v-show="user.owner">新建</el-button>
     </div>
 
     <el-table ref="multipleTableRef" :data="tableData" @selection-change="handleSelectionChange" style="width: 100%">
@@ -30,13 +30,15 @@
           <span style="cursor: pointer" @click="openUrl(scope.row.url)">{{ scope.row.url }}</span>
         </template>
       </el-table-column>
-      <el-table-column prop label="操作">
+      <el-table-column label="操作">
         <template #default="scope">
           <el-icon :size="20" @click="copyNumber(scope.row)" class="click-icon">
             <CopyDocument />
           </el-icon>
-          <el-button class="click-icon" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
-          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+          <el-button class="click-icon" size="small" @click="handleEdit(scope.$index, scope.row)" v-show="user.owner">编辑
+          </el-button>
+          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)" v-show="user.owner">删除
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -52,7 +54,8 @@
 
     <el-dialog v-model="dialogVisible">
       <delete_dialog :delete_id="currentDialogData.bk_id" @on-submit="doDelete"></delete_dialog>
-    </el-dialog>  </div>
+    </el-dialog>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -66,8 +69,9 @@ import { CopyDocument } from "@element-plus/icons-vue";
 import { ElNotification } from 'element-plus'
 import copy from 'copy-to-clipboard';
 import { h } from 'vue'
-const formLabelWidth = '140px'
-
+import { useUserStore } from '../../store/user'
+// obtain user infomation 
+const user = useUserStore()
 
 const bookmark_types = reactive<any[]>([])
 bookmark_type().then(response => {

src/view/school/index.vue

@@ -1,37 +1,23 @@
 <template>
   <div class="one_note">
     <div class="nav_tabs common_box">
-      <NavTab
-        :row_key="index"
-        :checked="nav == index ? true : false"
-        :nav_name="item"
-        @click="onclickNav(index)"
-        v-for="(item, index) in nav_list"
-      ></NavTab>
+      <NavTab :row_key="index" :checked="nav == index ? true : false" :nav_name="item" @click="onclickNav(index)"
+        v-for="(item, index) in nav_list"></NavTab>
     </div>
     <div class="section_tabs common_box">
       <div>
-        <SectionTab
-          :row_key="item.section_id"
-          @click="onclickSection(item.section_id, index)"
-          :checked="item.section_id === section.section_id ? true : false"
-          :section_data="item"
-          v-for="(item, index) in data_sections"
-        ></SectionTab>
+        <SectionTab :row_key="item.section_id + ''" @click="onclickSection(item.section_id, index)"
+          :checked="item.section_id === section.section_id ? true : false" :section_data="item"
+          v-for="(item, index) in data_sections"></SectionTab>
       </div>
       <el-button class="plus_button" @click="addSection">+</el-button>
     </div>
 
     <div class="page_tabs common_box">
       <div>
-        <PageTab
-          :row_key="item.page_id"
-          v-show="item.section_id == section.section_id ? true : false"
-          @click="onclickPage(item.page_id)"
-          :checked="item.page_id === page ? true : false"
-          :page_data="item"
-          v-for="(item, index) in current_page_list"
-        ></PageTab>
+        <PageTab :row_key="item.page_id + ''" v-show="item.section_id == section.section_id ? true : false"
+          @click="onclickPage(item.page_id)" :checked="item.page_id === page ? true : false" :page_data="item"
+          v-for="(item, index) in current_page_list"></PageTab>
       </div>
 
       <el-button class="plus_button" @click="addPage">+</el-button>
@@ -102,7 +88,7 @@ const addSection = () => {
   insert_section().then(response => {
     const data = response.data
     const section: Section = {
-      section_id: data.section_id,
+      section_id: data.section_id + '',
       section_name: data.section_name,
       page_list: data.page_list
     }
@@ -133,6 +119,7 @@ const addPage = () => {
   display: flex;
   align-items: stretch;
 }
+
 .section_tabs,
 .page_tabs {
   display: flex;
@@ -155,6 +142,7 @@ const addPage = () => {
   border-right-style: solid;
   border-right-color: antiquewhite;
 }
+
 .plus_button {
   border-top: 1px solid antiquewhite;
   border-bottom: 1px solid antiquewhite;

src/view/tools/unit.vue

@@ -1,27 +1,22 @@
 <template>
-  <div class="unit_tag" style="margin-bottom: 10px;">
-    <el-tag class="ml-2">from</el-tag>
-    <div v-for="(item, index) in colorup.list">
-      <el-tag
-        class="ml-2"
-        :style="item.style"
-        style
-        @click="onChange(item.binary, item.flg, index)"
-      >{{ item.text }}</el-tag>
+  <div>
+    <div class="unit_tag" style="margin-bottom: 10px;">
+      <el-tag class="ml-2">from</el-tag>
+      <div :class="'ml-1-' + index" v-for="(item, index) in colorup.list">
+        <el-tag class="ml-2" :style="item.style" style @click="onChange(item.binary, item.flg, index)">{{ item.text }}
+        </el-tag>
+      </div>
     </div>
-  </div>
-  <div class="unit_tag" style="margin-bottom: 10px; border-color: red;">
-    <el-tag class="ml-2" style="width: 47.625px">to</el-tag>
-    <div v-for="(item, index) in colordown.list">
-      <el-tag
-        class="ml-2"
-        :style="item.style"
-        @click="onChange(item.binary, item.flg, index)"
-      >{{ item.text }}</el-tag>
+    <div class="unit_tag" style="margin-bottom: 10px; border-color: red;">
+      <el-tag class="ml-2" style="width: 47.625px">to</el-tag>
+      <div :class="'ml-1-' + index" v-for="(item, index) in colordown.list">
+        <el-tag class="ml-2" :style="item.style" @click="onChange(item.binary, item.flg, index)">{{ item.text }}
+        </el-tag>
+      </div>
+    </div>
+    <div class="test" style="margin-bottom: 10px; border-color: red;" v-for="(index) in total">
+      <Cal @on-clickplus="add" :data="t2t" :isPlus="total == index"></Cal>
     </div>
-  </div>
-  <div class="test" style="margin-bottom: 10px; border-color: red;" v-for="(index) in total">
-    <Cal @on-clickplus="add" :data="t2t" :isPlus="total == index"></Cal>
   </div>
 </template>
 
@@ -77,9 +72,11 @@ const onChange = (binary: number, isFrom: boolean, index: number) => {
 .unit_tag {
   display: flex;
 }
+
 .test {
   display: flex;
 }
+
 .ml-2 {
   margin-right: 10px;
   margin-left: 10px;