simple321vip/violin-home
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

login 功能

Browse Source
This commit is contained in:
simple321vip
2022-04-15 00:08:42 +08:00
parent 18da3c57b7
commit 4caddc06c0
9 changed files with 124 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/NavBar.vue
+36 -22
View File
@@ -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
+4 -13
View File
@@ -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
+1 -10
View File
@@ -27,7 +27,6 @@
<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
+7 -1
View File
@@ -29,10 +29,16 @@ 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') {
if (token) {
next('/home')
} else {
next()
}
}
src/store/user.ts
+23 -3
View File
@@ -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
+11 -7
View File
@@ -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
+11 -7
View File
@@ -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
+11 -23
View File
@@ -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
+10 -13
View File
@@ -1,28 +1,23 @@
<template>
<div>
<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 :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 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="'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>
</template>
<script setup lang="ts">
@@ -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;