PC端登录事件处理:
在前端搭建好登录界面之后,就要开始处理登陆事件的业务逻辑,思路如下:
1.用户输入用户名,密码 / {登入信息数据获取、格式规范校验}
(1) v-model 绑定用户输入数据
(2)rules:校验用户输入规范, rules{[ required,message,trigger
2.获取校验结果,使用axios获取后台数据
(1)this.KaTeX parse error: Expected '}', got 'EOF' at end of input: … = await this.https.get(``) if(res.meta.status !==xxx) } (请求数据返回promise 使用await async 简化操作 )
3.登陆成功返回token值,保存到sessionstoryge中(sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了。
(1)window.sessionstorge.setItem(‘token’ ,res.data.token) 标签页的window中储存token令牌
4.路由跳转至首页组件,返回登陆成功
(1)this.$router.push(’/xxx’)xxx组件推送
添加拦截器 请求阶段拦截获取token
axios.interceptors.request.use(config => {
// 在请求返回的config的header头部中的.Authorization属性添加token令牌
config.headers.Authorization = window.sessionStorage.getItem(‘token’)
return config
})
5.添加路由导航守卫,验证token(
路由导航守卫是为了路由跳转之前做的检查及操作
比如:用户没有登录 而是直接通过修改浏览器 url 来访问网页,这种操作无疑是不安全的。路由导航守卫可以让我们对用户要跳转的路由做一次检查,符合条件后放行,不符合条件则强制用户跳转登录页面。)
*router入口文件 :
router.beforEach(to,from,next){
if(to.path === ‘/login’ ) next()
拿到token
const tokenr = window.sessionstorage.getItem(‘token’)
判断tonken值
if(!tokenr) return next(’/login’)
next()
}
自此,新手向的登录事件就完成了