|
1.登录页面的布局（通过element-ui组件实现布局）
使用的控件有：el-form,el-form-item,el-input,el-button html代码 <template>
<div class="login_container">
<div class="login_box">
<!-- 头像区域-->
<div class="avatae_box">
<img src="../assets/a.png" alt="">
</div>
<!-- 登录表单区域-->
<div>
<el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form">
<!-- 用户名-->
<el-form-item prop="username">
<el-input v-model="loginForm.username"
prefix-icon="iconfont icon-user"
placeholder="请输入用户名">
</el-input>
</el-form-item>
<!-- 密码-->
<el-form-item prop="password">
<el-input v-model="loginForm.password"
prefix-icon="iconfont icon-3702mima"
type="password" placeholder="请输入密码">
</el-input>
</el-form-item>
<!-- 按钮-->
<el-form-item class="btns">
<el-button type="primary" @click="login">登录</el-button>
<el-button type="info" @click="resetLoginForm">重置</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>2.重置表单内容 当用户名或者密码输入错误时，如果在输入框一个一个删除，影响了使用者的体验，因此添加了表单重置的功能，只需点击重置按钮，就能直接清空表单内容 1.通过ref属性绑定form表单<el-form ref="loginFormRef"><el-form> 2.给重置按钮绑定点击事件<el-button type="info" @click="resetLoginForm">重置</el-button> 3.methods中添加点击事件，通过使用form表单提供的resetFields方法进行表单的重置 resetLoginForm() {
// console.log(this)
this.$refs.loginFormRef.resetFields()
}3.表单的验证及登录存储token在sessionStorage form组件提供了表单验证的功能，只需要通过rules属性传入约定的验证规则，并将form-item的prop属性设置为校验字段名，再在Methods中通过validate方法进行验证 1.首先为form绑定验证规则对象(见上面html代码)<el-form :rules="loginFormRules"></el-form> 2.在包裹el-input的el-form-item中通过prop设置需要验证的字段名（username,password） 3.在data中定义rules规则 required表示必填，trigger表示触发验证的条件 loginFormRules:{
// 验证用户名是否合法
username: [
{ required: true, message: '请输入登录名称', trigger: 'blur' },
{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
],
// 验证密码是否合法
password: [
{ required: true, message: '请输入登录密码', trigger: 'blur' },
{ min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
]
}4.为登录按钮添加点击事件<el-button type="primary" @click="login">登录</el-button> 5.在Methods中添加login事件，当用户名及密码表单验证成功后发起axios请求，当请求成功后通过push跳转（home组件）并将token值存入sessionStorage中 login(){
this.$refs.loginFormRef.validate(async valid=>{
// console.log(valid);
if (!valid) return;
const {data:res} = await this.$http.post('login',this.loginForm);
//打印出来返回的是promise 所以用async await
// console.log(res);
if(res.meta.status !==200) return this.$message.error('登录失败');
this.$message.success('登录成功');
// 1．将登录成功之后的 token，保存到客户端的sessionstorage中
// 1.1 项目中出了登录之外的其他API接口，必须在登录之后才能访问
// 1.2 token只应在当前网站打开期间生效，所以将token保存在 sessionStorage中
// console.log(res);
window.sessionStorage.setItem('token',res.data.token);
// 2．通过push跳转到主页，路由地址是/home
this.$router.push('/home')
})4.在router/index.js中挂载路由导航守卫 通过获取token判定用户有没有登录，当没有登录时，直接通过url访问特定页面时，需要重新导航到登录页面，如果是登录状态，就放行 router.beforeEach有三个参数： to：将要访问的路径 form：代表从哪个路径跳转而来 next：表示一个函数，表示放行 //挂载路由导航守卫 //挂载路由导航守卫
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，有就放行，没有就跳转登录页
if(!tokenStr) return next('/login');
next();
})5. 退出账号基于token的方式实现退出，只需要销毁本地的token即可，再跳转页面至登录页 1.在新组件页面中添加按钮，并为其绑定点击事件 <el-button type="info" @click="logout">退出</el-button> 2.在methods中添加事件 logout(){
// 清空token并跳转到登录页
window.sessionStorage.clear();
this.$router.push('/login');
}持续更新中......... [小魏学编程于2021-09-29 09:33编辑了帖子]
|
|
公众号
