表单验证
<el-card shadow="never" class="login-card">
<!--登录表单-->
<!-- el-form > el-form-item > el-input -->
<el-form ref="form" :model="loginForm" :rules="loginRules">
<el-form-item prop="mobile">
<el-input v-model="loginForm.mobile" placeholder="请输入手机号" />
</el-form-item>
<el-form-item prop="password">
<el-input v-model="loginForm.password" show-password placeholder="请输入密码" />
</el-form-item>
<el-form-item prop="isAgree">
<el-checkbox v-model="loginForm.isAgree">
用户平台使用协议
</el-checkbox>
</el-form-item>
<el-form-item>
<el-button style="width:350px" type="primary" @click="login">登录</el-button>
</el-form-item>
</el-form>
</el-card>
export default {
name: 'Login',
data() {
return {
loginForm: {
mobile: process.env.NODE_ENV === 'development' ? '13800000002' : '',
password: process.env.NODE_ENV === 'development' ? '123456' : '',
isAgree: process.env.NODE_ENV === 'development'
},
loginRules: {
mobile: [{
required: true,
message: '请输入手机号',
trigger: 'blur'
}, {
pattern: /^1[3-9]\d{9}$/,
message: '手机号格式不正确',
trigger: 'blur'
}],
password: [{
required: true,
message: '请输入密码',
trigger: 'blur'
}, {
min: 6,
max: 16,
message: '密码长度应该为6-16位之间',
trigger: 'blur'
}],
// required只能检测 null undefined ""
isAgree: [{
validator: (rule, value, callback) => {
// rule校验规则
// value 校验的值
// callback 函数 - promise resolve reject
// callback() callback(new Error(错误信息))
value ? callback() : callback(new Error('您必须勾选用户的使用协议'))
}
}]
}
}
用户模块
methods: {
login() {
this.$refs.form.validate(async(isOK) => {
if (isOK) {
await this.$store.dispatch('user/login', this.loginForm)
// Vuex 中的action 返回的promise
// 跳转主页
this.$router.push('/')
}
})
}
setToken(state, token) {
state.token = token
// 同步到缓存
setToken(token)
},
async login(context, data) {
console.log(data)
// todo: 调用登录接口
const token = await login(data)
// 返回一个token 123456
context.commit('setToken', token)
},
数据持久化
未持久化,刷新页面token消失
const state = {
token: getToken(), // 从缓存中读取初始值
userInfo: {}, // 存储用户基本资料状态
routes: constantRoutes // 静态路由的数组
}