vue2+element-ui登录注册

目录

1.登录数据绑定

2.登录校验

3.登录重置项

4.登录预验证（调用vaildate）

 5.登录组件弹窗提示（message）

6.登录成功后进行跳转

7.路由导航守卫控制访问权限

8.退出登录

---

1.登录数据绑定

<el-form :model="loginForm">
   <el-form-item>
      <el-input v-model="loginForm.username></el-input>
   </el-form-item>
   <el-form-item>
      <el-input v-model="loginForm.password type="password"></el-input>
   </el-form-item>
</el-form>

1.利用:model数据绑定 将loginForm数据对象绑定到el-form，
  利用v-model双向数据绑定把input框和数据对象具体的属性进行绑定
2.:model 和v-model
v-model用于表单控件以外的标签是不起作用的
:model是v-bind:model的缩写，除引用类型外 都是单向数据传递，父组件传递到了子组件。
      引用类型（function ,array, object ）:子组件改变引用类型的数据，父组件也会改变。
3.利用type="password"将文本框中的密码进行隐藏处理

2.登录校验

1）el-form绑定属性rules绑定对应的校验规则对象

<el-form :rules="loginFormRules"></el-form>

2）定义校验规则的属性

loginFormRules:{
   username:[
     {required:true,message:'请输入登录名称',trigger:'blur'},
     {min:3,max:10,message:'长度在3-10个字符',trigger:'blur'}
],
   password:[
     {required:true,message:'请输入登录密码',trigger:'blur'},
     {min:8,max:15,message:'长度在8-15个字符',trigger:'blur'}
]
}

3)对表单项el-form-item通过prop指定不同的校验规则

<el-form-item prop="username"></el-form-item>

3.登录重置项

1）为el-form表单添加ref引用

<el-form ref="loginFormRef"></el-form>
//比如此处举例ref值为loginFormRef,其为组件的实例对象

2)编写重置方法（调用resetFileds）

resetFields方法对整个表单进行重置，将所有字段值重置为初始值并移除校验效果

methods(){

resetLoginForm(){

this.refs.loginFormRef.resetFields();

}}

3）为重置按钮绑定单击事件

<el-button @click=resetLoginForm>重置</el-button>

4.登录预验证（调用vaildate）

1)为el-form表单添加ref引用

2）使用valdate编写login方法

//编写login方法
login(){
this.refs.loginFormRef.validate(async (valid)=>{
console.log(valid)//表单验证结果布尔值true false
if(!valid) return;
                                     //请求地址  请求参数
const {data:res} = await this.$http.post('login',this.loginForm)
if(res.meta.status !== 200) return this.$message.error('登录失败')
//console.log('登陆成功')
this.$message.success('登陆成功')
})}

3）为登录按钮绑定单击事件 

<el-button @click=login>登录</el-button>

第一步：导包

import axios from 'axios'

配置请求根路径

aixos.default.baseURL = 'http://127.0.0.1:8080/api/'

第二步：把aixos包挂载到vue的原型对象上

vue.prototype.$http = aixos

 5.登录组件弹窗提示（message）

plugins->element.js文件下

引入

import {message} from'element-ui'

全局挂载

Vue.prototype.$message = Message

在方法中使用message取代console.log

//编写login方法
login(){
this.refs.loginFormRef.validate(async (valid)=>{
console.log(valid)//表单验证结果布尔值true false
if(!valid) return;
                                     //请求地址  请求参数
const {data:res} = await this.$http.post('login',this.loginForm)
//if(res.meta.status !== 200) return console.log('登录失败')
if(res.meta.status !== 200) return this.$message.error('登录失败')
//console.log('登陆成功')
this.$message.success('登陆成功')
})}

6.登录成功后进行跳转

1、将登录成功后的token保存到客户端的【sessionStorage】中

     项目中出现了登录以外的其他api接口，必须登录成功之后才可以访问

     token只能在当前网站打开期间生效，所以token保存在sessionStorage中

window.sessionStorage.setItem("token",res.data.token)

2)通过编程式导航跳转到后台主页，路由地址是/home

this.$router.push('/home')

7.路由导航守卫控制访问权限

若用户没有登录，但是通过url访问特定页面时，需要重新导航到登录页面

为路由对象，添加beforeEach 导航守卫

to 将要访问路径

from 从哪个路径跳转而来

next（）放行  

next（'/login'）强制跳转
router.beforeEach((to,from,next)=>{}

const router = new router({
routes:[
{path:'/',redirect:'/login'},
{path:'/login',component:Login}
]
})
//挂载路由导航守卫
router.beforeEach((to,from,next)=>{

  //如果用户访问的登录页，直接放行

 if(to.path ==='/login') return next()

  //从sessionStorage中获取到 保存的token值

const tokenStr = window.sessionStorage.getItem('token')

  //没有token，强制跳转到登录页

if(!tokenStr) return next('/login')
//否则 可以直接放行
next()

//对外暴露
export default router
})

8.退出登录

基于token的方式实现退出：销毁本地的token

<el-button @click="logout">退出</el-button>
methods：{
  logout(){
windoe.sessionStorage.clear();
this.$router.push("/login");
}}