邓洁 ：init
This commit is contained in:
邓洁
23
src/api/login.js
Normal file
23
src/api/login.js
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
import request from '@/utils/request.js'
|
||||||
|
|
||||||
|
export const getCodeImg = () => {
|
||||||
|
return request({
|
||||||
|
url: '/auth/captchaImage',
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export const login = (data) => {
|
||||||
|
return request({
|
||||||
|
url: '/auth/login',
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export const getUserInfo = () => {
|
||||||
|
return request({
|
||||||
|
url: '/auth/info',
|
||||||
|
method: 'get',
|
||||||
|
})
|
||||||
|
}
|
||||||
@@ -13,215 +13,3 @@ a {
|
|||||||
html, body, #app, .el-container, .el-aside, .el-main {
|
html, body, #app, .el-container, .el-aside, .el-main {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
|
||||||
height: 106px;
|
|
||||||
color: #EDC49A;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 23px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-menu {
|
|
||||||
border: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle {
|
|
||||||
line-height: 65px;
|
|
||||||
padding: 0 15px;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: #79bbff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
vertical-align: middle;
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-main {
|
|
||||||
padding: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-aside {
|
|
||||||
box-shadow: 4px 0 2px 1px rgb(171, 167, 167);
|
|
||||||
transition: width 0.3s;
|
|
||||||
overflow: hidden;
|
|
||||||
height: 100vh;
|
|
||||||
background-color: #211F31;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-popover.el-popper {
|
|
||||||
padding: 10px !important;
|
|
||||||
min-width: 60px !important;
|
|
||||||
ul{
|
|
||||||
li{
|
|
||||||
height: 25px;
|
|
||||||
line-height: 25px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar {
|
|
||||||
height: 65px;
|
|
||||||
border-bottom: 1px solid #999999;
|
|
||||||
padding: 0 15px 0 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.right-bar {
|
|
||||||
margin-left: auto;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
border-radius: 50%;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-dialog {
|
|
||||||
border-radius: 12px !important;
|
|
||||||
border: none;
|
|
||||||
|
|
||||||
.el-dialog__header {
|
|
||||||
border-top-left-radius: 12px;
|
|
||||||
border-top-right-radius: 12px;
|
|
||||||
// background-color: #262626;
|
|
||||||
margin: 0;
|
|
||||||
// .el-dialog__title{
|
|
||||||
// color: white;
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.table-header-btn {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.query-form {
|
|
||||||
.el-form-item__label {
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-button {
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.query-btn {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
|
|
||||||
.el-button {
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.table {
|
|
||||||
thead .el-table-column--selection .cell {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dialog-form {
|
|
||||||
.el-form-item {
|
|
||||||
flex-direction: column;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
|
|
||||||
.el-form-item__content {
|
|
||||||
.el-select {
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-form-item__label {
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-dialog {
|
|
||||||
:deep .el-dialog__header {
|
|
||||||
padding: 10px 20px;
|
|
||||||
|
|
||||||
.el-dialog__title {
|
|
||||||
font-size: 17px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-dialog__headerbtn {
|
|
||||||
top: 15px;
|
|
||||||
|
|
||||||
.i {
|
|
||||||
font-size: large;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep .el-dialog__footer {
|
|
||||||
padding: 10px 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.border {
|
|
||||||
:deep .el-dialog__header {
|
|
||||||
border-bottom: 1px solid #e8e8e8;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep .el-dialog__footer {
|
|
||||||
border-top: 1px solid #e8e8e8;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.layout {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
|
|
||||||
.layout-left {
|
|
||||||
width: 30%;
|
|
||||||
border: 1px solid #ebeef5;
|
|
||||||
padding: 10px;
|
|
||||||
|
|
||||||
|
|
||||||
.dict-tree {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
//:deep .el-button{
|
|
||||||
// //border: 1px solid;
|
|
||||||
// background-color: #fff;
|
|
||||||
//}
|
|
||||||
.left-type {
|
|
||||||
margin-right: 20px;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.layout-right {
|
|
||||||
width: 70%;
|
|
||||||
border: 1px solid #ebeef5;
|
|
||||||
margin-left: 10px;
|
|
||||||
padding: 10px
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,44 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="app-main-container">
|
|
||||||
<router-view v-slot="{ Component, route }">
|
|
||||||
<transition name="fade-transform" type="transition" appear mode="out-in">
|
|
||||||
<div>
|
|
||||||
<component
|
|
||||||
:is="Component"
|
|
||||||
:key="route.fullPath"
|
|
||||||
></component>
|
|
||||||
</div>
|
|
||||||
</transition>
|
|
||||||
</router-view>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.app-main-container {
|
|
||||||
padding: 15px;
|
|
||||||
max-height: calc(100vh - 96px);
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* fade-transform */
|
|
||||||
.fade-transform-leave-active,
|
|
||||||
.fade-transform-enter-active {
|
|
||||||
transition: all 0.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 可能为enter失效，拆分为 enter-from和enter-to */
|
|
||||||
.fade-transform-enter-from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateX(-30px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.fade-transform-enter-to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateX(0px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.fade-transform-leave-to {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateX(30px);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-container>
|
|
||||||
<el-aside
|
|
||||||
:width="!siderbarStore.getSiderBarStatus() ? '200px' : 'fit-content'"
|
|
||||||
:class="!siderbarStore.getSiderBarStatus() ? 'expand' : ''"
|
|
||||||
>
|
|
||||||
<SiderBar></SiderBar>
|
|
||||||
</el-aside>
|
|
||||||
<el-main>
|
|
||||||
<NavBar></NavBar>
|
|
||||||
<TagsView></TagsView>
|
|
||||||
<AppMain></AppMain>
|
|
||||||
</el-main>
|
|
||||||
</el-container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import SiderBar from './siderbar/index.vue'
|
|
||||||
import NavBar from './navbar/index.vue'
|
|
||||||
import TagsView from './tagsview/index.vue'
|
|
||||||
import AppMain from './appmain/AppMain.vue';
|
|
||||||
import {useSiderBar} from '../store/siderbar';
|
|
||||||
|
|
||||||
const siderbarStore = useSiderBar()
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.expand {
|
|
||||||
animation: Expand 0.3s ease forwards;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes Expand {
|
|
||||||
from {
|
|
||||||
width: 64px;
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@@ -1,47 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-breadcrumb separator=">">
|
|
||||||
<el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="item.path">
|
|
||||||
<span v-if="item.meta.noRedirect || index === breadcrumbList.length-1" class="no-redirect">
|
|
||||||
{{ item.meta.title }}
|
|
||||||
</span>
|
|
||||||
<router-link v-else :to="item.redirect || item.path">
|
|
||||||
{{ item.meta.title }}
|
|
||||||
</router-link>
|
|
||||||
</el-breadcrumb-item>
|
|
||||||
</el-breadcrumb>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
const route = useRoute()
|
|
||||||
const router = useRouter()
|
|
||||||
|
|
||||||
watch(route, () => {
|
|
||||||
getBreadcrumb()
|
|
||||||
})
|
|
||||||
|
|
||||||
//面包屑导航数据
|
|
||||||
const breadcrumbList = ref([])
|
|
||||||
|
|
||||||
//获取面包屑导航数据
|
|
||||||
const getBreadcrumb = () => {
|
|
||||||
let matched = route.matched.filter(item => item.meta && item.meta.title)
|
|
||||||
const first = matched[0]
|
|
||||||
if (!isDashboard(first)) {
|
|
||||||
matched = [{path: '/home', meta: {title: '首页'}}].concat(matched)
|
|
||||||
}
|
|
||||||
breadcrumbList.value.length = 0;
|
|
||||||
const reBreadcrumbList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
|
|
||||||
breadcrumbList.value.push(...reBreadcrumbList)
|
|
||||||
}
|
|
||||||
|
|
||||||
const isDashboard = (meta) => {
|
|
||||||
const name = meta && meta.name
|
|
||||||
if (!name) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
return name.trim().toLocaleLowerCase() === 'Home'.toLocaleLowerCase()
|
|
||||||
}
|
|
||||||
|
|
||||||
getBreadcrumb()
|
|
||||||
|
|
||||||
</script>
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="toggle" @click="toggleClick">
|
|
||||||
<component :is="siderbarStore.getSiderBarStatus() ? 'Fold' : 'Expand'" class="icon"></component>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import {useSiderBar} from '@/store/siderbar.js'
|
|
||||||
|
|
||||||
const siderbarStore = useSiderBar()
|
|
||||||
const toggleClick = () => {
|
|
||||||
siderbarStore.setSiderBarStatus()
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -1,37 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="navbar">
|
|
||||||
<Hamburger></Hamburger>
|
|
||||||
<Breadcrumb></Breadcrumb>
|
|
||||||
<div class="right-bar">
|
|
||||||
<el-popover
|
|
||||||
placement="bottom"
|
|
||||||
:width="80"
|
|
||||||
trigger="click"
|
|
||||||
>
|
|
||||||
<template #reference>
|
|
||||||
<img src="@/assets/vue.svg" alt="">
|
|
||||||
</template>
|
|
||||||
<template #default>
|
|
||||||
<ul>
|
|
||||||
<li @click="handleToAuth">个人中心</li>
|
|
||||||
<li @click="handleLogout">退出登录</li>
|
|
||||||
</ul>
|
|
||||||
</template>
|
|
||||||
</el-popover>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import Breadcrumb from './Breadcrumb.vue';
|
|
||||||
import Hamburger from './Hamburger.vue';
|
|
||||||
|
|
||||||
const router = useRouter()
|
|
||||||
|
|
||||||
const handleToAuth = () => {
|
|
||||||
router.push('/auth')
|
|
||||||
}
|
|
||||||
const handleLogout = () => {
|
|
||||||
router.push('/login')
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -1,25 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="logo" ref="logo">
|
|
||||||
<span v-if="!siderbarStore.getSiderBarStatus()">TUNNEL-CLOUD</span>
|
|
||||||
</div>
|
|
||||||
<el-menu
|
|
||||||
router
|
|
||||||
:default-active="activeMenu"
|
|
||||||
:unique-opened="true"
|
|
||||||
:collapse="siderbarStore.getSiderBarStatus()"
|
|
||||||
active-text-color="#EDC49A"
|
|
||||||
background-color='#211F31'
|
|
||||||
text-color="#fff"
|
|
||||||
>
|
|
||||||
<el-menu-item index="/">
|
|
||||||
<el-icon><User /></el-icon>
|
|
||||||
<template #title>首页</template>
|
|
||||||
</el-menu-item>
|
|
||||||
</el-menu>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import {useSiderBar} from '@/store/siderbar.js'
|
|
||||||
const siderbarStore = useSiderBar()
|
|
||||||
</script>
|
|
||||||
|
|
||||||
@@ -1,92 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="link-box">
|
|
||||||
<el-scrollbar noresize>
|
|
||||||
<div>
|
|
||||||
<router-link
|
|
||||||
v-for="item in tagsViewStore.visitedViews"
|
|
||||||
:key="item.path" :to="{ path: item.path }" class="tag"
|
|
||||||
:class="isActive(item) ? 'active' : ''"
|
|
||||||
@click.prevent
|
|
||||||
@contextmenu.prevent.native="openMenu(item, $event)">
|
|
||||||
<span>{{ item.meta.title }}</span>
|
|
||||||
<component is="CircleClose" class="close" @click.prevent="closeTagView(item.path)"></component>
|
|
||||||
</router-link>
|
|
||||||
</div>
|
|
||||||
</el-scrollbar>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { useTagsView } from '@/store/tagsview.js'
|
|
||||||
|
|
||||||
const route = useRoute()
|
|
||||||
const tagsViewStore = useTagsView()
|
|
||||||
const visible = ref(false)
|
|
||||||
const left = ref()
|
|
||||||
const top = ref()
|
|
||||||
|
|
||||||
watch(route, () => {
|
|
||||||
init()
|
|
||||||
})
|
|
||||||
const init = () => {
|
|
||||||
tagsViewStore.addVisitedViews(route)
|
|
||||||
}
|
|
||||||
const closeTagView = (path) => {
|
|
||||||
tagsViewStore.delVisitedViews(path)
|
|
||||||
}
|
|
||||||
const isActive = (tag) => {
|
|
||||||
return tag.path === route.path
|
|
||||||
}
|
|
||||||
const openMenu = (tag, e) => {
|
|
||||||
left.value = e.x + 10
|
|
||||||
top.value = e.y + 10
|
|
||||||
visible.value = true
|
|
||||||
}
|
|
||||||
init()
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.close {
|
|
||||||
width: 12px;
|
|
||||||
height: 12px;
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link-box {
|
|
||||||
padding: 0 15px;
|
|
||||||
border-bottom: 1px solid #222;
|
|
||||||
line-height: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag {
|
|
||||||
padding: 3px 6px;
|
|
||||||
border: 1px solid #666;
|
|
||||||
font-size: 14px;
|
|
||||||
margin-right: 5px;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.active {
|
|
||||||
background-color: #211F31;
|
|
||||||
color: #EDC49A;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contextmenu {
|
|
||||||
position: absolute;
|
|
||||||
z-index: 3000;
|
|
||||||
background: #fff;
|
|
||||||
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
|
|
||||||
|
|
||||||
li {
|
|
||||||
margin: 0;
|
|
||||||
padding: 7px 16px;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: #eee;
|
|
||||||
color: #EDC49A;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -11,7 +11,6 @@ import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
|||||||
import 'element-plus/dist/index.css'
|
import 'element-plus/dist/index.css'
|
||||||
|
|
||||||
import '@/assets/styles/index.scss'
|
import '@/assets/styles/index.scss'
|
||||||
import '@/assets/styles/sidebar.scss'
|
|
||||||
|
|
||||||
const app = createApp(App)
|
const app = createApp(App)
|
||||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||||
|
|||||||
@@ -1,10 +1,7 @@
|
|||||||
import { createRouter, createWebHashHistory } from 'vue-router';
|
import { createRouter, createWebHashHistory } from 'vue-router';
|
||||||
import NProgress from 'nprogress'//进度条
|
import NProgress from 'nprogress'//进度条
|
||||||
import 'nprogress/nprogress.css'
|
import 'nprogress/nprogress.css'
|
||||||
import Layout from '@/layout/index.vue'
|
import { getToken } from '../utils/auth'
|
||||||
// import { getToken } from '../utils/auth'
|
|
||||||
// import { usePermissionStore } from '../store/permisstion.js'
|
|
||||||
// import { useAuthStore } from '../store/userstore.js'
|
|
||||||
NProgress.configure({ showSpinner: false })
|
NProgress.configure({ showSpinner: false })
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
@@ -19,15 +16,6 @@ const routes = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
name: 'layout',
|
|
||||||
component: Layout,
|
|
||||||
redirect: '/home',
|
|
||||||
meta: {
|
|
||||||
hidden: false
|
|
||||||
},
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
path: '/home',
|
|
||||||
name: 'home',
|
name: 'home',
|
||||||
component: () => import('@/views/home/index.vue'),
|
component: () => import('@/views/home/index.vue'),
|
||||||
meta: {
|
meta: {
|
||||||
@@ -35,41 +23,31 @@ const routes = [
|
|||||||
breadcrumb: true
|
breadcrumb: true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
|
||||||
},
|
|
||||||
];
|
];
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
history: createWebHashHistory(),
|
history: createWebHashHistory(),
|
||||||
routes,
|
routes,
|
||||||
});
|
});
|
||||||
// router.beforeEach(async (to,form,next)=>{
|
router.beforeEach( (to,form,next)=>{
|
||||||
// const permissionStore = usePermissionStore()
|
NProgress.start()
|
||||||
// const authStore = useAuthStore()
|
if(!getToken()) {
|
||||||
// NProgress.start()
|
if (to.path === '/login') {
|
||||||
// if(!getToken()) {
|
next()
|
||||||
// if(to.path === '/login') {
|
NProgress.done()
|
||||||
// next()
|
} else {
|
||||||
// NProgress.done()
|
next({path: '/login'})
|
||||||
// }else {
|
}
|
||||||
// next({path: '/login'})
|
}else {
|
||||||
// }
|
console.log('有token')
|
||||||
// }else {
|
if(to.path === '/login') {
|
||||||
// if(to.path === '/login') {
|
next('/')
|
||||||
// next('/')
|
NProgress.done()
|
||||||
// NProgress.done()
|
}else {
|
||||||
// }else {
|
next()
|
||||||
// permissionStore.setIsLoadRoutes(true)
|
}
|
||||||
// if(permissionStore.isLoadRoutes && permissionStore.asyncRouters.length==0){
|
}
|
||||||
// // await authStore.setUserInfo()
|
})
|
||||||
// next({...to, replace: true})
|
|
||||||
// } else {
|
|
||||||
// next()
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// }
|
|
||||||
// })
|
|
||||||
router.afterEach(()=>{
|
router.afterEach(()=>{
|
||||||
NProgress.done()
|
NProgress.done()
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -1,19 +0,0 @@
|
|||||||
import { defineStore } from "pinia";
|
|
||||||
export const useSiderBar = defineStore('siderbar',()=>{
|
|
||||||
//定义控制侧边栏是否展开变量默认展开
|
|
||||||
const isCollapse = ref(false)
|
|
||||||
//获取侧边栏状态
|
|
||||||
const getSiderBarStatus = () => {
|
|
||||||
return isCollapse.value
|
|
||||||
}
|
|
||||||
//设置侧边栏状态
|
|
||||||
const setSiderBarStatus = () => {
|
|
||||||
const status = getSiderBarStatus()
|
|
||||||
return isCollapse.value = !status
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
getSiderBarStatus,
|
|
||||||
setSiderBarStatus,
|
|
||||||
}
|
|
||||||
})
|
|
||||||
@@ -1,56 +0,0 @@
|
|||||||
import { defineStore } from "pinia";
|
|
||||||
import { ref } from "vue";
|
|
||||||
import { useRouter } from "vue-router";
|
|
||||||
|
|
||||||
export const useTagsView = defineStore('tagsView',()=>{
|
|
||||||
const router = useRouter()
|
|
||||||
//已显示的标签页list
|
|
||||||
const visitedViews = ref([])
|
|
||||||
|
|
||||||
//添加标签页面
|
|
||||||
const addVisitedViews = ({path,meta}) => {
|
|
||||||
if(visitedViews.value.length == 0) {
|
|
||||||
visitedViews.value.push({path,meta})
|
|
||||||
}else {
|
|
||||||
const paths = visitedViews.value.map(item => item.path)
|
|
||||||
if(paths.includes(path) == false) {
|
|
||||||
visitedViews.value.push({path,meta})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//删除标签页
|
|
||||||
const delVisitedViews = (path) => {
|
|
||||||
console.log('进入删除');
|
|
||||||
if(visitedViews.value.length - 1 == 0) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
visitedViews.value.forEach((item,index)=>{
|
|
||||||
if(item.path == path) {
|
|
||||||
visitedViews.value.splice(index,1)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
toLastTagView(visitedViews)
|
|
||||||
}
|
|
||||||
|
|
||||||
//删除其他标签页
|
|
||||||
const delOtherVisitedViews = ({path,meta}) => {
|
|
||||||
visitedViews.value = []
|
|
||||||
visitedViews.value.push({path,meta})
|
|
||||||
toLastTagView(visitedViews)
|
|
||||||
}
|
|
||||||
|
|
||||||
//路由到末尾标签页
|
|
||||||
const toLastTagView = (view) => {
|
|
||||||
console.log(view,'进入跳转末页');
|
|
||||||
const lastTagView = view.value.slice(-1)[0]
|
|
||||||
router.push(lastTagView.path)
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
visitedViews,
|
|
||||||
addVisitedViews,
|
|
||||||
delVisitedViews,
|
|
||||||
delOtherVisitedViews,
|
|
||||||
}
|
|
||||||
})
|
|
||||||
42
src/store/userstore.js
Normal file
42
src/store/userstore.js
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
import { defineStore } from "pinia";
|
||||||
|
import { ref } from "vue";
|
||||||
|
import { getUserInfo, login } from "../api/login";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
import {getAuthInfo, removeToken, setAuthInfo, setToken} from "../utils/auth";
|
||||||
|
|
||||||
|
export const useAuthStore = defineStore('auth',()=>{
|
||||||
|
const userinfo = ref({})
|
||||||
|
const permisstions = ref([])
|
||||||
|
const roles = ref([])
|
||||||
|
const userLogin = async (data) => {
|
||||||
|
let flag
|
||||||
|
await login(data).then(res=>{
|
||||||
|
if(res?.code === 1000) {
|
||||||
|
setToken(res.data)
|
||||||
|
flag = true
|
||||||
|
}else {
|
||||||
|
ElMessage.error(res.msg)
|
||||||
|
flag = false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return flag
|
||||||
|
}
|
||||||
|
const userLogout = () => {
|
||||||
|
removeToken()
|
||||||
|
}
|
||||||
|
const setUserInfo = async () => {
|
||||||
|
await getUserInfo().then(res=>{
|
||||||
|
userinfo.value = res.data.user
|
||||||
|
permisstions.value = res.data.permissions
|
||||||
|
roles.value = res.data.roles
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
userinfo,
|
||||||
|
permisstions,
|
||||||
|
userLogin,
|
||||||
|
userLogout,
|
||||||
|
setUserInfo
|
||||||
|
}
|
||||||
|
})
|
||||||
25
src/utils/auth.js
Normal file
25
src/utils/auth.js
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
import Cookies from "js-cookie";
|
||||||
|
|
||||||
|
export const getToken = () => {
|
||||||
|
return Cookies.get('Authorization')
|
||||||
|
}
|
||||||
|
|
||||||
|
export const setToken = (token) => {
|
||||||
|
return Cookies.set('Authorization', token)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const removeToken = () => {
|
||||||
|
return Cookies.remove('Authorization')
|
||||||
|
}
|
||||||
|
|
||||||
|
export const getAuthInfo = () => {
|
||||||
|
return Cookies.get('authinfo')
|
||||||
|
}
|
||||||
|
|
||||||
|
export const setAuthInfo = (info) => {
|
||||||
|
return Cookies.set('authinfo', info)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const removeAuthInfo = () => {
|
||||||
|
return Cookies.remove('authinfo')
|
||||||
|
}
|
||||||
95
src/utils/request.js
Normal file
95
src/utils/request.js
Normal file
@@ -0,0 +1,95 @@
|
|||||||
|
import axios from "axios";
|
||||||
|
import { ElMessage, ElMessageBox } from "element-plus";
|
||||||
|
import { getToken, removeToken } from "./auth";
|
||||||
|
|
||||||
|
axios.defaults.headers['Content-Type']='application/json'
|
||||||
|
|
||||||
|
const serveice = axios.create({
|
||||||
|
baseURL: import.meta.env.VITE_BASE_URL,
|
||||||
|
timeout: 6000
|
||||||
|
})
|
||||||
|
|
||||||
|
serveice.interceptors.request.use(config=>{
|
||||||
|
const ACCESS_TOKEN = getToken() || ''
|
||||||
|
if(ACCESS_TOKEN!==undefined && ACCESS_TOKEN!=='') {
|
||||||
|
config.headers['Authorization']=ACCESS_TOKEN
|
||||||
|
}
|
||||||
|
return config
|
||||||
|
},error=>{
|
||||||
|
Promise.reject(error)
|
||||||
|
})
|
||||||
|
serveice.interceptors.response.use(response=>{
|
||||||
|
// const status = response.status || 200
|
||||||
|
//二进制数据直接返回
|
||||||
|
if(response.request.responseType === 'blob' || response.request.responseType === 'arraybuffer') {
|
||||||
|
return response.data
|
||||||
|
}
|
||||||
|
// switch(status) {
|
||||||
|
// case 401:
|
||||||
|
// ElMessageBox.confirm('登录状态已过期,请重新登录','系统提示',{
|
||||||
|
// confirmButtonText: '重新登录',
|
||||||
|
// cancelButtonText: '取消',
|
||||||
|
// type: 'warning',
|
||||||
|
// closeOnClickModal: false
|
||||||
|
// }).then(()=>{
|
||||||
|
// removeToken()
|
||||||
|
// window.location = '/login'
|
||||||
|
// })
|
||||||
|
// return Promise.reject('会话已过期,请重新登录')
|
||||||
|
// case 402:
|
||||||
|
// break;
|
||||||
|
// case 403:
|
||||||
|
// ElMessage.warning('禁止访问')
|
||||||
|
// break;
|
||||||
|
// case 404:
|
||||||
|
// ElMessage.warning('不存在的地址')
|
||||||
|
// break;
|
||||||
|
// case 405:
|
||||||
|
// ElMessage.warning('传输格式错误,请检查')
|
||||||
|
// break;
|
||||||
|
// case 500:
|
||||||
|
// ElMessage.error('系统未知错误')
|
||||||
|
// // return response.data
|
||||||
|
// break
|
||||||
|
// }
|
||||||
|
return response.data
|
||||||
|
},error=>{
|
||||||
|
let response = error.response
|
||||||
|
const status = response.status;
|
||||||
|
switch(status) {
|
||||||
|
case 401:
|
||||||
|
ElMessageBox.confirm('登录状态已过期,请重新登录','系统提示',{
|
||||||
|
confirmButtonText: '重新登录',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning',
|
||||||
|
closeOnClickModal: false
|
||||||
|
}).then(()=>{
|
||||||
|
removeToken()
|
||||||
|
window.location = '/login'
|
||||||
|
})
|
||||||
|
return Promise.reject('会话已过期,请重新登录')
|
||||||
|
case 402:
|
||||||
|
break;
|
||||||
|
case 403:
|
||||||
|
ElMessage.warning('禁止访问')
|
||||||
|
removeToken()
|
||||||
|
window.location = '/forbidden'
|
||||||
|
break;
|
||||||
|
case 404:
|
||||||
|
ElMessage.warning('不存在的地址')
|
||||||
|
break;
|
||||||
|
case 405:
|
||||||
|
ElMessage.warning('传输格式错误,请检查')
|
||||||
|
break;
|
||||||
|
case 500:
|
||||||
|
if (response.data){
|
||||||
|
return response.data
|
||||||
|
}else {
|
||||||
|
ElMessage.error('系统未知错误')
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return Promise.reject(error)
|
||||||
|
})
|
||||||
|
|
||||||
|
export default serveice
|
||||||
@@ -5,9 +5,6 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
// import { useCacheStore } from '@/store/cache.js'
|
|
||||||
// const cacheStore = useCacheStore()
|
|
||||||
// cacheStore.setCacheKey(['normal_disable','show_hide'])
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
@@ -6,12 +6,18 @@
|
|||||||
:rules="rules"
|
:rules="rules"
|
||||||
label-width="65px"
|
label-width="65px"
|
||||||
>
|
>
|
||||||
<h3>Rib-Account-ADMIN</h3>
|
<h3>FateVerse</h3>
|
||||||
<el-form-item prop="username" label="账号">
|
<el-form-item prop="username" label="账号">
|
||||||
<el-input v-model="loginForm.username" :prefix-icon="User"></el-input>
|
<el-input v-model="loginForm.username" :prefix-icon="User" ></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item prop="password" label="密码">
|
<el-form-item prop="password" label="密码">
|
||||||
<el-input v-model="loginForm.password" type="password" :prefix-icon="Lock"></el-input>
|
<el-input v-model="loginForm.password" type="password" :prefix-icon="Lock" ></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item prop="code" label="验证码" >
|
||||||
|
<div class="code">
|
||||||
|
<el-input v-model="loginForm.code" :prefix-icon="key" @keyup.enter.native="handleLogin(formInstance)"></el-input>
|
||||||
|
<img :src="codeImg" alt="" @click="getCode">
|
||||||
|
</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button @click="handleLogin(formInstance)" type="primary">登录</el-button>
|
<el-button @click="handleLogin(formInstance)" type="primary">登录</el-button>
|
||||||
@@ -21,44 +27,61 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import {onBeforeUnmount, reactive,} from 'vue'
|
import { useRouter } from 'vue-router';
|
||||||
// import {useAuthStore} from '@/store/userstore'
|
import { getCodeImg } from '../../api/login';
|
||||||
import {ElLoading} from 'element-plus'
|
import { useAuthStore } from '@/store/userstore'
|
||||||
import {User, Lock, Key} from '@element-plus/icons-vue'
|
import { ElLoading } from 'element-plus'
|
||||||
|
import { User,Lock, Key } from '@element-plus/icons-vue'
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
// const authStore = useAuthStore()
|
const authStore = useAuthStore()
|
||||||
const loginForm = reactive({
|
const loginForm = reactive({
|
||||||
username: 'admin',
|
username: 'admin',
|
||||||
password: '123456',
|
password: '123456',
|
||||||
|
code: '',
|
||||||
uuid: ''
|
uuid: ''
|
||||||
})
|
})
|
||||||
|
const codeImg = ref('')
|
||||||
const formInstance = ref()
|
const formInstance = ref()
|
||||||
const rules = reactive({
|
const rules = reactive({
|
||||||
username: [
|
username: [
|
||||||
{required: true, message: '请输入账户名', trigger: 'blur'},
|
{ required: true, message: '请输入账户名', trigger: 'blur' },
|
||||||
],
|
],
|
||||||
password: [
|
password: [
|
||||||
{required: true, message: '请输入密码', trigger: 'blur'},
|
{ required: true, message: '请输入密码', trigger: 'blur' },
|
||||||
|
],
|
||||||
|
code: [
|
||||||
|
{ required: true, message: '请输入验证码', trigger: 'blur' },
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
||||||
const handleLogin = (instance) => {
|
//获取二维码
|
||||||
if (!instance) return
|
const getCode = () => {
|
||||||
instance.validate(async (valid) => {
|
getCodeImg().then(res=>{
|
||||||
if (!valid) return
|
loginForm.uuid = res.data.uuid
|
||||||
// 发送请求
|
codeImg.value = 'data:image/gif;base64,' + res.data.img
|
||||||
// await authStore.userLogin(loginForm).then(res=>{
|
|
||||||
// if(res) {
|
|
||||||
ElLoading.service({text: '正在加载系统资源', background: '#409eff', lock: true})
|
|
||||||
await router.push('/')
|
|
||||||
// }
|
|
||||||
// })
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const handleLogin = (instance) => {
|
||||||
|
if(!instance) return
|
||||||
|
instance.validate( async (valid, fields)=>{
|
||||||
|
if (!valid) return
|
||||||
|
// 发送请求
|
||||||
|
await authStore.userLogin(loginForm).then(res=>{
|
||||||
|
if(res) {
|
||||||
|
ElLoading.service({text: '正在加载系统资源',background: '#409eff',lock: true})
|
||||||
|
router.push('/')
|
||||||
|
}else {
|
||||||
|
getCode()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
getCode()
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
ElLoading.service({text: '正在加载系统资源', background: '#409eff', lock: true}).close()
|
ElLoading.service({text: '正在加载系统资源',background: '#409eff',lock: true}).close()
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -88,5 +111,18 @@ onBeforeUnmount(() => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.code {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
.el-input {
|
||||||
|
// width: ;
|
||||||
|
flex: 2;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
height: 32px;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user