表单验证 form标签加
:rules='loginrulers'
验证框的el-form-item加(包起来)
prop="usename"
再
export default {
data(){
return{
loginrules:{
usename:[
{ required:true, message:'用户名不能为空', trigger: 'blur' },
{ min: 3, max: 10, message: '长度在3-10个字符', trigger: 'blur' }
]
}}}}
表单绑定数据
通过空对象
先用:model双向绑定data(){
return{ 对象:{ 表单数据: '', 表单数据: ''} }
需要绑定的input里面添加
v-model="loginform.password"
重置表单
from表单标签加: ref='loginFormref'
<el-button type="info" @click="resetLoginForm">重置</el-button>
验证规则写在 exprot default{
methods:{
resetLoginForm(){
this.$refs.loginFormref.resetFields() //loginFormref ref里的值要和refs一样
}
}
}
登录注册预验证和请求
当我们点击登录按钮,要对数据进行验证
this.$refs.LoginFormRef.validate(async valid => { //对数据进行预验证 结果为回调函数返回布尔值
//如果valid为false那么直接退出不进行下一步
if (!valid) return
const { data: res } = await this.$http.post('login',this.loginform) //解构赋值 把请求到的数据中的data 赋值给res res就是data中的值
console.log(res)
if (res.meta.status !== 200) return this.$message.error('登录失败!') //res的返回status状态
this.$message.success('登录成功!')
window.sessionStorage.setItem('token', res.data.token) //把请求成功的token放在浏览器中保存 sessionStorage
this.$router.push('/index') //编程式跳转
})
}
导航守卫
防止没有登录在浏览器直接输入index进入页面 没有则强制跳转到login界面
在index.js中设置导航守卫
// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
// to 将要访问的路径
// from 代表从哪个路径跳转而来
// next 是一个函数,表示放行
// next() 放行 next('/login') 强制跳转
if (to.path === '/login') {
return next()
}
//获得本地token
const tokenstr = window.sessionStorage.getItem('token')
//如果没有token则切换到login界面
if (!tokenstr) {
return next('/login')
}
next()
})
退出功能
// 清空token
window.sessionStorage.clear()
// 跳转到登录页
this.$router.push('/login')