记录（十七）使用vue3来完成的一个简易登录

史上最强最恶の大怪兽

于 2024-07-10 10:07:08 发布

阅读量142

点赞数 2

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/2301_76468244/article/details/140315707

版权

效果图

代码

//账号密码登录
const ruleFormRef = ref('');
let ruleForm = reactive({
	username:'',
	userpwd:'',
})

//校验规则
let rules = reactive({
  username: [
  	{ required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 11, message: '请输入3-11位用户名', trigger: 'blur' },
  ],
  userpwd:[
  	{ required: true, message: '请输入密码', trigger: 'blur' },
    { min: 3, max: 11, message: '请输入3-11位密码', trigger: 'blur' },
  ]
});

//账号密码点击登录
const userBtn = (formEl) => {
	if (!formEl) return
 	formEl.validate((valid, fields) => {
	    if (valid) {
			loginByJson({
                action:'signin',
                username:ruleForm.username,
                password:ruleForm.userpwd
            }).then(res=>{
                if(res.code != "10022"){
                    ElMessage({
                        showClose: true,
                        message: res.msg,
                        type: 'error',
                    })
                    return
                }
                userStore.setToken(res.access_token)
                ElMessage({
                    showClose: true,
                    message: "登陆成功",
                    type: 'success'
                })
                getUserInfoAndSetUserInfo()
                router.go(-1);
            })
	    }else{
            ElMessage({
                showClose: true,
                message: res.msg,
                type: 'warning',
            })
        }
	})
}

获取个人信息
const getUserInfoAndSetUserInfo = () => {
    getInfo().then(res => {
        userStore.setUserInfo(res)
    })
}