实现登录
实现登录前表单数据的预验证
1.给表单登录事件
<el-button type="primary" size="medium" @click="login">登录</el-button>
2.点击事件方法
login() {
// 登录的预先验证
this.$refs.ruleForm.validate(isOK => {
console.log(isOK)
})
}
配置axios发起登录请求
1.先看登录接口
2.准备工作
启动mysql
启动api接口后台
需要用到axios,所以导入axios
// 导入axios请求
import axios from 'axios'
// 配置请求的根路径
axios.defaults.baseURL = 'https://www.liulongbin.top:8888/api/private/v1/'
// 给Vue原形添加一个属性$http为axios对象
Vue.prototype.$http = axios
发起请求
配置Message全局弹框组件
导入Message
- 这个Message不是组件,所以不用use
- 而是需要挂载到Vue的原型上,这样可以在任意组件中通过this访问
Message使用
回车登陆功能
回车登录: @keyup.enter.native=“login”
<el-form-item prop="password">
<!-- 密码 -->
<!-- 回车登录: @keyup.enter.native="login" -->
<el-input
@keyup.enter.native="login"
prefix-icon="iconfont icon-3702mima"
v-model="ruleForm.password"
type="password"
>
</el-input>
</el-form-item>
完善登录之后的操作
操作步骤
- 将登录成功之后的 token,保存到客户端的 sessionStorage 中
1.1 项目中除了登录之外的其他API接口,必须在登录之后才能访问
1.2 token 只应在当前网站打开期间生效,所以将 token 保存在 sessionStorage 中(记得用小写w-----window) - 通过编程式导航跳转到后台主页,路由地址是 /home
跳转到home得有组件
新建组件
分配路由
路由导航守卫控制页面访问权限
为什么要用导航守卫
路由导航守卫控制页面访问权限
to将要访问的路径
from 代表从哪个路径跳转而来
next()是一个函数 表示放行
next() 放行 next(’/login’) 强制跳转
- beforeEach会在路由匹配之前,执行
- 如果执行了next()方法,才会继续匹配路由,跳到对应的vue界面
实现退出功能
退出分析
基于token的方式实现退出比较简单,只需要销毁本地的token即可。这样,后续的请求就不会携带token,必须重新登录生成一个新的token之后才可以访问页面
logout() {
// 清除token
window.sessionStorage.clear()
//路由跳转
this.$router.push('/login')
}