登录 新手向业务处理场景（1）

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()
}
自此，新手向的登录事件就完成了