一、登录过程分析
- 在登录页面当中,引用
Element UI
中的input
输入框,配置 :model="loginForm"
,同时在列表项input
输入框中结合v-model
命令,v-model="loginForm.username"
,实现双向数据绑定。对于data
中的数据,也需要进行定义之前model
所绑定的数据loginForm
,这个也是录表单的数据绑定对象,在loginForm
中定义具体的数据,比如username
,这样在表单中通过loginForm.username
拿到数据了。 - 对于登录表单的校验,当离开选项框的时候,验证是否合法,需要配置
:rules="loginFormRules"
,进行配置绑定校验规则。在data
中的数据,定义loginFormRules
,在里面配置校验规则,比如username: []
,里面就是具体的规则项,验证用户名是否合法。 - 当点击登录以后,通过
@click="login"
,触发登录事件,在methods
中定义login
函数,进行表单的预校验。如果预验证为false
,那么就不发起请求。如果预验证为true
,那么就发起登录请求。由于返回值是一个promise
对象,异步的,所以可以结合async
和await
。通过状态码校验是否成功,如果成功,将登录成功之后的token
,保存到客户端的sessionStorage
。token
只在当前网站打开期间生效,关闭网站之后不生效,所以token
保存在sessionStorage
中。通过编程式导航跳转到后台主页,路由地址是 /home
。 - 如果在登录页面中,需要进行重置,通过
@click="resetLoginForm"
,触发重置事件。点击重置按钮,重置登录表单,可以通过Element UI
中自带的一个resetFields()
方法进行重置字段,通过ref
可以拿到表单对象,再取到表单的所有数据,进行清除。 - 登录页面的完整代码
login.vue
:
<template>
<div class="login_container">
<div class="login_box">
<div class="avatar_box">
<img src="../assets/login.jpeg" alt="">
</div>
<el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form">
<el-form-item prop="username">
<el-input prefix-icon="iconfont icon-yonghu" v-model="loginForm.username"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input prefix-icon="iconfont icon-icon_suo-" v-model="loginForm.password" type="password"></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>
</template>
<script>
export default {
data () {
return {
loginForm: {
username: 'admin',
password: '123456'
},
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' }
]
}
}
},
methods: {
resetLoginForm () {
this.$refs.loginFormRef.resetFields()
},
login () {
this.$refs.loginFormRef.validate(async (valid) => {
if (!valid) return
const {data: res} = await this.$http.post('login', this.loginForm)
if (res.meta.status !== 200) return this.$message.error('登录失败')
this.$message.success('登录成功')
window.sessionStorage.setItem('token', res.data.token)
this.$router.push('/home')
})
}
}
}
</script>
<style lang="less" scoped>
.login_container {
background-color: #2b4b6b;
height: 100%;
}
.login_box {
width: 450px;
height: 300px;
background-color: #fff;
border-radius: 3px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
.avatar_box {
width: 130px;
height: 130px;
border: 1px solid #eee;
border-radius: 50%;
padding: 10px;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
img {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #eee;
}
}
}
.login_form {
position: absolute;
bottom: 0;
width: 100%;
padding: 0 20px;
box-sizing: border-box;
}
.btns {
display: flex;
justify-content: flex-end;
}
</style>
二、登录的导航守卫拦截
- 对于登录的导航守卫,如果用户未登录,就想要访问管理系统的页面,应该是进行拦截的,只有登录以后才能够访问页面,可以使用
router.beforeEach()
这个方法,进行导航守卫的拦截。 router.beforeEach((to, from, next))
中有三个参数,to
将要访问的路径,from
代表从哪个路径跳转而来的,next
是一个函数表示放行。如果用户访问的是登录页,直接放行。如果访问的管理系统的页面,那么从sessionStorage
中获取保存的token
值。如果token
的值不存在,强制跳转到登录页。存在token
,那么就放行。- 路由页面的完整代码 router.js:
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/',
redirect: '/login'
},
{
path: '/login',
component: () => import('../components/Login.vue')
},
{
path: '/home',
component: () => import('../components/Home.vue')
}
]
})
router.beforeEach((to, from, next) => {
if (to.path === '/login') return next()
const tokenStr = window.sessionStorage.getItem('token')
if (!tokenStr) return next('/login')
next()
})
export default router