vue注册页面表单元素

表单验证   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')