refactor(projects): 动态路由权限完善

This commit is contained in:
Soybean
2022-04-29 02:00:51 +08:00
parent 401f0c748d
commit 55ddc9cab0
36 changed files with 406 additions and 717 deletions

View File

@ -50,9 +50,9 @@ function handleSubmit(e: MouseEvent) {
formRef.value.validate(errors => {
if (!errors) {
window.$message?.success('验证成功');
window.$message?.success('验证成功!');
} else {
window.$message?.error('验证失败');
window.$message?.error('验证失败!');
}
});
}

View File

@ -43,7 +43,6 @@ import { useSmsCode } from '@/hooks';
import { formRules, getImgCodeRule } from '@/utils';
const auth = useAuthStore();
const { login } = useAuthStore();
const { toLoginModule } = useRouterPush();
const { label, isCounting, loading: smsLoading, getSmsCode } = useSmsCode();
@ -70,8 +69,9 @@ function handleSubmit(e: MouseEvent) {
formRef.value.validate(errors => {
if (!errors) {
const { phone, code } = model;
login(phone, code, 'sms');
window.$message?.success('验证通过!');
} else {
window.$message?.error('验证失败');
}
});
}

View File

@ -0,0 +1,46 @@
<template>
<n-space :vertical="true">
<n-divider class="!mb-0 text-14px text-[#666]">其他账户登录</n-divider>
<n-space justify="center">
<n-button
v-for="item in accounts"
:key="item.userName"
type="primary"
@click="login(item.userName, item.password)"
>
{{ item.label }}
</n-button>
</n-space>
</n-space>
</template>
<script lang="ts" setup>
interface Emits {
(e: 'login', param: { userName: string; password: string }): void;
}
const emit = defineEmits<Emits>();
const accounts = [
{
label: '超级管理员',
userName: 'Super',
password: 'super123'
},
{
label: '管理员',
userName: 'Admin',
password: 'admin123'
},
{
label: '普通用户',
userName: 'User01',
password: 'user01123'
}
];
function login(userName: string, password: string) {
emit('login', { userName, password });
}
</script>
<style scoped></style>

View File

@ -1,3 +1,4 @@
import OtherLogin from './OtherLogin.vue';
import OtherAccount from './OtherAccount.vue';
export { OtherLogin };
export { OtherLogin, OtherAccount };

View File

@ -1,10 +1,10 @@
<template>
<n-form ref="formRef" :model="model" :rules="rules" size="large" :show-label="false">
<n-form-item path="phone">
<n-input v-model:value="model.phone" placeholder="请输入手机号码" />
<n-form-item path="userName">
<n-input v-model:value="model.userName" placeholder="请输入用户名" />
</n-form-item>
<n-form-item path="pwd">
<n-input v-model:value="model.pwd" type="password" show-password-on="click" placeholder="请输入密码" />
<n-form-item path="password">
<n-input v-model:value="model.password" type="password" show-password-on="click" placeholder="请输入密码" />
</n-form-item>
<n-space :vertical="true" :size="24">
<div class="flex-y-center justify-between">
@ -31,7 +31,7 @@
</n-button>
</div>
</n-space>
<other-login />
<other-account @login="handleLoginOtherAccount" />
</n-form>
</template>
@ -42,7 +42,7 @@ import { EnumLoginModule } from '@/enum';
import { useAuthStore } from '@/store';
import { useRouterPush } from '@/composables';
import { formRules } from '@/utils';
import { OtherLogin } from './components';
import { OtherAccount } from './components';
const auth = useAuthStore();
const { login } = useAuthStore();
@ -50,12 +50,11 @@ const { toLoginModule } = useRouterPush();
const formRef = ref<(HTMLElement & FormInst) | null>(null);
const model = reactive({
phone: '15170283876',
pwd: 'abc123456'
userName: 'Soybean',
password: 'soybean123'
});
const rules: FormRules = {
phone: formRules.phone,
pwd: formRules.pwd
password: formRules.pwd
};
const rememberMe = ref(false);
@ -65,10 +64,15 @@ function handleSubmit(e: MouseEvent) {
formRef.value.validate(errors => {
if (!errors) {
const { phone, pwd } = model;
login(phone, pwd, 'pwd');
const { userName, password } = model;
login(userName, password);
}
});
}
function handleLoginOtherAccount(param: { userName: string; password: string }) {
const { userName, password } = param;
login(userName, password);
}
</script>
<style scoped></style>

View File

@ -63,9 +63,9 @@ function handleSubmit(e: MouseEvent) {
formRef.value.validate(errors => {
if (!errors) {
if (!agreement.value) return;
window.$message?.success('验证成功');
window.$message?.success('验证成功!');
} else {
window.$message?.error('验证失败');
window.$message?.error('验证失败!');
}
});
}