feat: 登录和退出登录
This commit is contained in:
wang_fan_w
parent
b45b7ddd8a
commit
8433d18d3e
130
src/auto-import.d.ts
vendored
130
src/auto-import.d.ts
vendored
@ -5,67 +5,79 @@
|
||||
// Generated by unplugin-auto-import
|
||||
export {}
|
||||
declare global {
|
||||
const EffectScope: typeof import('vue')['EffectScope']
|
||||
const computed: typeof import('vue')['computed']
|
||||
const createApp: typeof import('vue')['createApp']
|
||||
const customRef: typeof import('vue')['customRef']
|
||||
const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
|
||||
const defineComponent: typeof import('vue')['defineComponent']
|
||||
const effectScope: typeof import('vue')['effectScope']
|
||||
const getCurrentInstance: typeof import('vue')['getCurrentInstance']
|
||||
const getCurrentScope: typeof import('vue')['getCurrentScope']
|
||||
const h: typeof import('vue')['h']
|
||||
const inject: typeof import('vue')['inject']
|
||||
const isProxy: typeof import('vue')['isProxy']
|
||||
const isReactive: typeof import('vue')['isReactive']
|
||||
const isReadonly: typeof import('vue')['isReadonly']
|
||||
const isRef: typeof import('vue')['isRef']
|
||||
const markRaw: typeof import('vue')['markRaw']
|
||||
const nextTick: typeof import('vue')['nextTick']
|
||||
const onActivated: typeof import('vue')['onActivated']
|
||||
const onBeforeMount: typeof import('vue')['onBeforeMount']
|
||||
const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
|
||||
const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
|
||||
const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
|
||||
const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
|
||||
const onDeactivated: typeof import('vue')['onDeactivated']
|
||||
const onErrorCaptured: typeof import('vue')['onErrorCaptured']
|
||||
const onMounted: typeof import('vue')['onMounted']
|
||||
const onRenderTracked: typeof import('vue')['onRenderTracked']
|
||||
const onRenderTriggered: typeof import('vue')['onRenderTriggered']
|
||||
const onScopeDispose: typeof import('vue')['onScopeDispose']
|
||||
const onServerPrefetch: typeof import('vue')['onServerPrefetch']
|
||||
const onUnmounted: typeof import('vue')['onUnmounted']
|
||||
const onUpdated: typeof import('vue')['onUpdated']
|
||||
const provide: typeof import('vue')['provide']
|
||||
const reactive: typeof import('vue')['reactive']
|
||||
const readonly: typeof import('vue')['readonly']
|
||||
const ref: typeof import('vue')['ref']
|
||||
const resolveComponent: typeof import('vue')['resolveComponent']
|
||||
const shallowReactive: typeof import('vue')['shallowReactive']
|
||||
const shallowReadonly: typeof import('vue')['shallowReadonly']
|
||||
const shallowRef: typeof import('vue')['shallowRef']
|
||||
const toRaw: typeof import('vue')['toRaw']
|
||||
const toRef: typeof import('vue')['toRef']
|
||||
const toRefs: typeof import('vue')['toRefs']
|
||||
const toValue: typeof import('vue')['toValue']
|
||||
const triggerRef: typeof import('vue')['triggerRef']
|
||||
const unref: typeof import('vue')['unref']
|
||||
const useAttrs: typeof import('vue')['useAttrs']
|
||||
const useCssModule: typeof import('vue')['useCssModule']
|
||||
const useCssVars: typeof import('vue')['useCssVars']
|
||||
const useLink: typeof import('vue-router')['useLink']
|
||||
const useRoute: typeof import('vue-router')['useRoute']
|
||||
const useRouter: typeof import('vue-router')['useRouter']
|
||||
const useSlots: typeof import('vue')['useSlots']
|
||||
const watch: typeof import('vue')['watch']
|
||||
const watchEffect: typeof import('vue')['watchEffect']
|
||||
const watchPostEffect: typeof import('vue')['watchPostEffect']
|
||||
const watchSyncEffect: typeof import('vue')['watchSyncEffect']
|
||||
const EffectScope: (typeof import("vue"))["EffectScope"];
|
||||
const computed: (typeof import("vue"))["computed"];
|
||||
const createApp: (typeof import("vue"))["createApp"];
|
||||
const customRef: (typeof import("vue"))["customRef"];
|
||||
const defineAsyncComponent: (typeof import("vue"))["defineAsyncComponent"];
|
||||
const defineComponent: (typeof import("vue"))["defineComponent"];
|
||||
const effectScope: (typeof import("vue"))["effectScope"];
|
||||
const getCurrentInstance: (typeof import("vue"))["getCurrentInstance"];
|
||||
const getCurrentScope: (typeof import("vue"))["getCurrentScope"];
|
||||
const h: (typeof import("vue"))["h"];
|
||||
const inject: (typeof import("vue"))["inject"];
|
||||
const isProxy: (typeof import("vue"))["isProxy"];
|
||||
const isReactive: (typeof import("vue"))["isReactive"];
|
||||
const isReadonly: (typeof import("vue"))["isReadonly"];
|
||||
const isRef: (typeof import("vue"))["isRef"];
|
||||
const markRaw: (typeof import("vue"))["markRaw"];
|
||||
const nextTick: (typeof import("vue"))["nextTick"];
|
||||
const onActivated: (typeof import("vue"))["onActivated"];
|
||||
const onBeforeMount: (typeof import("vue"))["onBeforeMount"];
|
||||
const onBeforeRouteLeave: (typeof import("vue-router"))["onBeforeRouteLeave"];
|
||||
const onBeforeRouteUpdate: (typeof import("vue-router"))["onBeforeRouteUpdate"];
|
||||
const onBeforeUnmount: (typeof import("vue"))["onBeforeUnmount"];
|
||||
const onBeforeUpdate: (typeof import("vue"))["onBeforeUpdate"];
|
||||
const onDeactivated: (typeof import("vue"))["onDeactivated"];
|
||||
const onErrorCaptured: (typeof import("vue"))["onErrorCaptured"];
|
||||
const onMounted: (typeof import("vue"))["onMounted"];
|
||||
const onRenderTracked: (typeof import("vue"))["onRenderTracked"];
|
||||
const onRenderTriggered: (typeof import("vue"))["onRenderTriggered"];
|
||||
const onScopeDispose: (typeof import("vue"))["onScopeDispose"];
|
||||
const onServerPrefetch: (typeof import("vue"))["onServerPrefetch"];
|
||||
const onUnmounted: (typeof import("vue"))["onUnmounted"];
|
||||
const onUpdated: (typeof import("vue"))["onUpdated"];
|
||||
const provide: (typeof import("vue"))["provide"];
|
||||
const reactive: (typeof import("vue"))["reactive"];
|
||||
const readonly: (typeof import("vue"))["readonly"];
|
||||
const ref: (typeof import("vue"))["ref"];
|
||||
const resolveComponent: (typeof import("vue"))["resolveComponent"];
|
||||
const shallowReactive: (typeof import("vue"))["shallowReactive"];
|
||||
const shallowReadonly: (typeof import("vue"))["shallowReadonly"];
|
||||
const shallowRef: (typeof import("vue"))["shallowRef"];
|
||||
const toRaw: (typeof import("vue"))["toRaw"];
|
||||
const toRef: (typeof import("vue"))["toRef"];
|
||||
const toRefs: (typeof import("vue"))["toRefs"];
|
||||
const toValue: (typeof import("vue"))["toValue"];
|
||||
const triggerRef: (typeof import("vue"))["triggerRef"];
|
||||
const unref: (typeof import("vue"))["unref"];
|
||||
const useAttrs: (typeof import("vue"))["useAttrs"];
|
||||
const useCssModule: (typeof import("vue"))["useCssModule"];
|
||||
const useCssVars: (typeof import("vue"))["useCssVars"];
|
||||
const useLink: (typeof import("vue-router"))["useLink"];
|
||||
const useRoute: (typeof import("vue-router"))["useRoute"];
|
||||
const useRouter: (typeof import("vue-router"))["useRouter"];
|
||||
const useSlots: (typeof import("vue"))["useSlots"];
|
||||
const watch: (typeof import("vue"))["watch"];
|
||||
const watchEffect: (typeof import("vue"))["watchEffect"];
|
||||
const watchPostEffect: (typeof import("vue"))["watchPostEffect"];
|
||||
const watchSyncEffect: (typeof import("vue"))["watchSyncEffect"];
|
||||
}
|
||||
// for type re-export
|
||||
declare global {
|
||||
// @ts-ignore
|
||||
export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
|
||||
import('vue')
|
||||
export type {
|
||||
Component,
|
||||
ComponentPublicInstance,
|
||||
ComputedRef,
|
||||
ExtractDefaultPropTypes,
|
||||
ExtractPropTypes,
|
||||
ExtractPublicPropTypes,
|
||||
InjectionKey,
|
||||
PropType,
|
||||
Ref,
|
||||
VNode,
|
||||
WritableComputedRef
|
||||
} from "vue";
|
||||
import("vue");
|
||||
}
|
||||
|
||||
10
src/components.d.ts
vendored
10
src/components.d.ts
vendored
@ -5,11 +5,11 @@
|
||||
// Read more: https://github.com/vuejs/core/pull/3399
|
||||
export {}
|
||||
|
||||
declare module 'vue' {
|
||||
declare module "vue" {
|
||||
export interface GlobalComponents {
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
SvgIcon: typeof import('./components/SvgIcon/index.vue')['default']
|
||||
VerifyCode: typeof import('./components/VerifyCode/index.vue')['default']
|
||||
RouterLink: (typeof import("vue-router"))["RouterLink"];
|
||||
RouterView: (typeof import("vue-router"))["RouterView"];
|
||||
SvgIcon: (typeof import("./components/SvgIcon/index.vue"))["default"];
|
||||
VerifyCode: (typeof import("./components/VerifyCode/index.vue"))["default"];
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,7 +11,7 @@ const props = defineProps({
|
||||
identifyCodes: {
|
||||
//验证码从该字段中抽取生成
|
||||
type: String,
|
||||
default: "1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ"
|
||||
default: "1234567890abcdefghijklmnopqrstuvwxyz"
|
||||
},
|
||||
fontSizeMin: {
|
||||
// 字体最小值
|
||||
@ -54,7 +54,7 @@ const props = defineProps({
|
||||
default: 44
|
||||
}
|
||||
});
|
||||
const emit = defineEmits(["update:changeCode"]);
|
||||
const emit = defineEmits(["verifyCodeChange"]);
|
||||
const identifyCode = ref("");
|
||||
watch(identifyCode, () => {
|
||||
drawPic();
|
||||
@ -75,9 +75,10 @@ const randomColor = (min: any, max: any) => {
|
||||
return "rgb(" + r + "," + g + "," + b + ")";
|
||||
};
|
||||
const drawPic = () => {
|
||||
let canvas = document.getElementById("s-canvas");
|
||||
let canvas = <HTMLCanvasElement>document.getElementById("s-canvas");
|
||||
if (!canvas) return;
|
||||
let ctx = canvas.getContext("2d");
|
||||
if (!ctx) return;
|
||||
ctx.textBaseline = "bottom";
|
||||
// 绘制背景
|
||||
ctx.fillStyle = randomColor(props.backgroundColorMin, props.backgroundColorMax);
|
||||
@ -131,7 +132,7 @@ const makeCode = (e: any, n: any) => {
|
||||
for (let i = 0; i < n; i++) {
|
||||
identifyCode.value += e[randomNum(0, e.length)];
|
||||
}
|
||||
emit("update:changeCode", identifyCode.value);
|
||||
emit("verifyCodeChange", identifyCode.value);
|
||||
};
|
||||
/*切换验证码end*/
|
||||
</script>
|
||||
|
||||
@ -100,7 +100,7 @@
|
||||
</template>
|
||||
</a-doption>
|
||||
<a-divider margin="0" />
|
||||
<a-doption>
|
||||
<a-doption @click="logOut">
|
||||
<template #default>
|
||||
<SvgIcon :name="'exit'" :size="18" />
|
||||
<span class="margin-left-text">退出登录</span>
|
||||
@ -114,6 +114,27 @@
|
||||
<script setup lang="ts">
|
||||
import Notice from "@/layout/components/Header/components/Notice/index.vue";
|
||||
import myImage from "@/assets/img/my-image.jpg";
|
||||
import { Modal } from "@arco-design/web-vue";
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
|
||||
const logOut = () => {
|
||||
Modal.warning({
|
||||
title: "提示",
|
||||
content: "确定退出登录？",
|
||||
hideCancel: false,
|
||||
closable: true,
|
||||
onBeforeOk: () => {
|
||||
try {
|
||||
sessionStorage.removeItem("token");
|
||||
router.replace("/login");
|
||||
return true;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { createRouter, createWebHashHistory } from "vue-router";
|
||||
import { dynamicRoutes, staticRoutes, notFoundAndNoPower } from "@/router/route.ts";
|
||||
import { initSetRouter } from "@/router/route-output.ts";
|
||||
import NProgress from "@/config/nprogress";
|
||||
|
||||
/**
|
||||
@ -30,7 +29,7 @@ router.beforeEach(async (to, from, next) => {
|
||||
} else if (to.path === "/login" && sessionStorage.getItem("token")) {
|
||||
next("/home");
|
||||
} else {
|
||||
await initSetRouter();
|
||||
next();
|
||||
}
|
||||
// if (to.path === "/login" && !sessionStorage.getItem("token")) {
|
||||
// next();
|
||||
|
||||
@ -4,20 +4,28 @@
|
||||
<div class="banner_box"></div>
|
||||
<div class="login_box">
|
||||
<div class="login_title">DC Admin</div>
|
||||
<div class="login_title_desc">丰富的的页面模板，覆盖大多数典型业务场景</div>
|
||||
<div class="login_title_desc">国际化，路由配置，状态管理应有尽有</div>
|
||||
<div class="login_title_desc">丰富的的页面模板，覆盖大多数典型业务场景</div>
|
||||
<div class="login_form_box">
|
||||
<a-form :model="form" layout="vertical">
|
||||
<a-form-item field="username">
|
||||
<a-input v-model="form.username" placeholder="请输入账号" />
|
||||
<a-form :rules="rules" :model="form" layout="vertical" @submit="onSubmit">
|
||||
<a-form-item field="username" :hide-asterisk="true">
|
||||
<a-input v-model="form.username" allow-clear placeholder="请输入账号">
|
||||
<template #prefix>
|
||||
<icon-user />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item field="password">
|
||||
<a-input v-model="form.password" placeholder="请输入密码" />
|
||||
<a-form-item field="password" :hide-asterisk="true">
|
||||
<a-input-password v-model="form.password" allow-clear placeholder="请输入密码">
|
||||
<template #prefix>
|
||||
<icon-lock />
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
<a-form-item field="verifyCode">
|
||||
<a-form-item field="verifyCode" :hide-asterisk="true">
|
||||
<div class="verifyCode">
|
||||
<a-input style="width: 160px" v-model="form.verifyCode" placeholder="请输入验证码" />
|
||||
<VerifyCode :content-height="32" :content-width="100" />
|
||||
<a-input style="width: 160px" v-model="form.verifyCode" allow-clear placeholder="请输入验证码" />
|
||||
<VerifyCode :content-height="30" :content-width="100" @verify-code-change="verifyCodeChange" />
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item field="remember">
|
||||
@ -27,7 +35,7 @@
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button long type="primary">登录</a-button>
|
||||
<a-button long type="primary" html-type="submit">登录</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
@ -39,12 +47,75 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Message } from "@arco-design/web-vue";
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
const form = ref({
|
||||
username: "admin",
|
||||
password: "123456",
|
||||
verifyCode: null,
|
||||
remember: false
|
||||
});
|
||||
const rules = ref({
|
||||
username: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入账号"
|
||||
},
|
||||
{
|
||||
validator: (value: string, cb: any) => {
|
||||
if (value !== verify.value.username) {
|
||||
cb("请输入正确的账号");
|
||||
} else {
|
||||
cb();
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入密码"
|
||||
},
|
||||
{
|
||||
validator: (value: string, cb: any) => {
|
||||
if (value !== verify.value.password) {
|
||||
cb("请输入正确的密码");
|
||||
} else {
|
||||
cb();
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
verifyCode: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入验证码"
|
||||
},
|
||||
{
|
||||
validator: (value: string, cb: any) => {
|
||||
if (value !== verify.value.verifyCode) {
|
||||
cb("请输入正确的验证码");
|
||||
} else {
|
||||
cb();
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
const verify = ref({
|
||||
username: "admin",
|
||||
password: "123456",
|
||||
verifyCode: ""
|
||||
});
|
||||
const verifyCodeChange = (code: string) => (verify.value.verifyCode = code);
|
||||
|
||||
const onSubmit = ({ errors }: any) => {
|
||||
if (errors) return;
|
||||
sessionStorage.setItem("token", "DC-Admin");
|
||||
Message.success("登录成功");
|
||||
router.push("/home");
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user