首先先了解一下，我们的效果实现流程
首先，登录概要和业务流程及相关技术要点
1 .登录页面布局
2 .创建两个Vue.js文件
3 .做一个登录页面和注册页面吧
4 .登录页面布局
5 .路由配置
6 .登录表单数据绑定
7 .登录表单验证规则
8 .重置登录表单
9 .登录前认证
10 .在登录单元中配置弹匣提示
11 .成功登录后的行动
12 .将登录的token保存到客户端的会话存储中
13 .通过编程导航跳转到后台主页，路由地址为默认路径'/'
14 .在我们的主页注销中，组件放置弹夹提示，用removeItem删除我们的token
在登录业务流程1 .登录页上输入用户名和密码
2 .调用后台接口进行验证
3 .验证通过后，根据后台响应状态跳转至项目主页
登录功能实现
1 .首先通过根保护验证登录，判断是否需要登录
{ path:'/login '，name:'login '，component:login， meta:{ login:true }} //需要登录的位置定义不需要查看meta-true的if(islogin )//1.已经注册，直接if(data.error===400 }if(to.name===(login ) ) next ) (name: ) home ) ) else ) next ) } return； (if (！ isLogin to.name==='login ' ) {//2.您没有登录，但登录页面next () if (！ isLogin to.name！=='login'}{//3.您没有登录。 去的也不是登录页面next。 {name:'login'}}}else{//不需要登录直接进入next ()2.表单的验证规则使用Element的组件库
在模板中用Element写我们的风格布局
div class='login-section '！ - : rules=' rules '-- El-formlabel-position=' top ' label-width=' 100 px ' class=' demo-rule form ' 3360 ef 使用v-model获取用户输入的名称--El-input type=' text ' v-model=' rules from.name '/El-input/获取用户使用El-form-itemEl-form- v-model输入的密码--El-input type=' password ' v-model=' rules from.passe El-form-itemEl -定义提交事件--El-buttontype=' primary ' @ click=' submit from (' rule from ' ) )提交/El-button
详细查看Element官网from表格
用Data定义
输入rulesfrom:{name: '、password:'}、rules:{ name:[ //验证规则{required:true，message: message : '的长度为1到5个字符'，trigger:'blur'}，password : [ { required 3360 true，message] {min:1，max:5
//我们点击提交时，可以通过出发方式获得表格的所有东西submitfrom(formname ) this.$refs ) formname ).validate () valid )=) 在后端输入用户信息和密码log in (name : this.rules from.name，password : this.rules from.password， } ).then ) ) ) data )={coota}返回的if(data.code===0) localstorage.setitem )、data.data.token ) window }if(data.code===1) this.$message.error(data.mes ) } ) else ) console.log ) errorsubmit！ ' )； return false } }此时，注销也写在router beforeEach上并转换为他
const token=local storage.getitem (' token )； //！ token是布尔型const isLogin=！ 进入token //路由时，必须将token发送回后端以验证其是否合法。 store.comMIT(chageuserinfo )、data.data ) )。