vue中后台管理的登录功能
用到el-form表单提交组件,
<el-form :rules="loginFormRules" ref="loginFormRef" label-width="0px" class="login_form" :model="loginForm">
<!-- 用户名-->
<el-form-item prop="username">
<el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input>
</el-form-item>
<!-- 密码-->
<el-form-item prop="password">
<el-input type="password" v-model="loginForm.password" prefix-icon="iconfont icon-3702mima"></el-input>
</el-form-item>
<!-- 按钮区-->
<el-form-item class="btns">
<el-button type="primary" @click="login" :loading="loginLoading">登录</el-button>
<el-button type="info" @click="resetLoginForm">重置</el-button>
</el-form-item>
</el-form>
data() {
return {
loginLoading: false, // 登录限制
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' }
]
}
}
},
点击登录按钮,获取到输入框中的账号和密码,携带账号和密码请求后台接口数据,后台返回数据中有token,把token存到sessionStorage中,为啥不存localStorage?因为这个token只想在网站打开期间有效,然后再跳转到首页
login() {
this.loginLoading = true
this.$refs.loginFormRef.validate(async valid => {
if (!valid) {
return (this.loginLoading = false)
}
const { data: res } = await this.$http.post('login', this.loginForm)
if (res.meta.status !== 200) {
this.loginLoading = false
return this.$message.error('登录失败 帐号或密码错误!')
}
this.$message.success('登录成功!')
// 1. 将登录成功之后的 token,保存到客户端的 sessionStorage(会话机制/只在当前页面生效)中 localStorage(持久话机制/关闭页面也不会忘记数据)
// 1.1 项目中除了登录之外的API接口,必须在登录之后才能访问
// 1.2 token 只应在当前网站打开期间生效, 所以将 token 保存在 sessionStorage中
window.sessionStorage.setItem('token', res.data.token)
// 2. 通过编程式路由导航跳转到后台主页,路由地址是 /home
this.$router.push('/home')
})
}
重置功能
resetLoginForm() {
// 点击重置按钮,重置登录表单
// this.$refs[loginFormRef].resetFields()
this.$refs.loginFormRef.resetFields()
},
在路由中index.js中做判断,如果没token就强制跳转到login页面
router.beforeEach((to, from, next) => {
// to 将访问哪一个路径
// from 代表从哪个路径跳转而来
// next 是一个函数,表示放行
// next() 放行 next('/login') 强制跳转
if (to.path === '/login') return next()
// 获取token
const token = window.sessionStorage.getItem('token')
if (!token) return next('/login')
next()
})
退出功能—把token清除掉,然后退回login页面
logout() {
window.sessionStorage.clear()
this.$router.push('/login')
},