add token
parent
56f1eac7c8
commit
9bc90f9297
@ -0,0 +1,87 @@
|
|||||||
|
<template>
|
||||||
|
<el-form
|
||||||
|
ref="ruleFormRef"
|
||||||
|
:model="loginForm"
|
||||||
|
:rules="rules"
|
||||||
|
label-width="120px"
|
||||||
|
class="demo-ruleForm"
|
||||||
|
size="default"
|
||||||
|
style="margin: 100px"
|
||||||
|
>
|
||||||
|
<el-form-item label="邮箱" prop="userMail">
|
||||||
|
<el-input v-model="loginForm.userMail" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="密码" prop="userPassword">
|
||||||
|
<el-input v-model="loginForm.userPassword" type="password"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
|
||||||
|
<el-button @click="resetForm(ruleFormRef)">注册</el-button>
|
||||||
|
<el-button @click="logout">登出</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { reactive, ref } from 'vue'
|
||||||
|
import type { FormInstance } from 'element-plus'
|
||||||
|
import axios from "axios";
|
||||||
|
import qs from "qs";
|
||||||
|
import {ElMessage} from "element-plus";
|
||||||
|
import router from "@/router";
|
||||||
|
|
||||||
|
const ruleFormRef = ref<FormInstance>()
|
||||||
|
const loginForm = reactive({
|
||||||
|
userMail: '',
|
||||||
|
userPassword: '',
|
||||||
|
})
|
||||||
|
|
||||||
|
const rules = reactive({
|
||||||
|
userMail: [
|
||||||
|
{ required: true, message: '请输入邮箱', trigger: 'change' },
|
||||||
|
],
|
||||||
|
userPassword: [
|
||||||
|
{ required: true, message: '请输入密码', trigger: 'change' },
|
||||||
|
{ min: 5, max: 60, message: 'Length should be 3 to 5', trigger: 'blur' },
|
||||||
|
],
|
||||||
|
})
|
||||||
|
|
||||||
|
const submitForm = async (formEl: FormInstance | undefined) => {
|
||||||
|
if (!formEl) return
|
||||||
|
await formEl.validate((valid, fields) => {
|
||||||
|
if (valid) {
|
||||||
|
axios.post('/user/mailLogin',qs.stringify(loginForm))
|
||||||
|
.then(res=>{
|
||||||
|
if(res.data)
|
||||||
|
{
|
||||||
|
localStorage.setItem("token",res.data.tokenValue)
|
||||||
|
ElMessage.success('登录成功');
|
||||||
|
router.push('/')
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
ElMessage.error('用户名或密码错误')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const resetForm = (formEl: FormInstance | undefined) => {
|
||||||
|
if (!formEl) return
|
||||||
|
formEl.resetFields()
|
||||||
|
}
|
||||||
|
|
||||||
|
const logout = () => {
|
||||||
|
axios.get('/user/logout')
|
||||||
|
.then((res)=>{
|
||||||
|
ElMessage.success('登出成功');
|
||||||
|
localStorage.removeItem("token")
|
||||||
|
router.push('/')
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
Loading…
Reference in New Issue