当点击登录按钮,不应该直接发起请求,而应当在发起请求之前对表单数据进行预验证,验证通过之后再发起请求,验证没通过提示数据不合法
如何进行预验证呢?
如果返回的promise对象,应该用await async简化,await只能用于async修饰的方法中
为什么要把token保存到sessionStorage而不是localStorage?
因为localStorae是持久化的存储机制,而sessionStorage是会话期间的存储机制,而token应该咋当前网站打开期间生效
路由导航守卫控制页面
如果用户没有登录,但是直接通过url直接访问特定界面,需要手动导航到登录页面
如何使用呢?
在路由index.js文件中,需要先拿到路由对象,给路由对象调用一个beforeEach()函数,这个函数就叫做导航守卫,三个参数,to:将要访问的那个页面,from:来源路径,next:放行的函数
如果用户访问的是登录页路径,那么都放行,所有的用户都允许访问登录页
如果访问的不是登录页,先把token取出来,如果没有token,那么就需要强制跳转到登录页next('/login'),如有则访问next()
退出功能实现原理:
基于token方式实现比较简单,只需要销毁本地token即可,这样后续的请求就不会携带token,必须重新登录生成一个新的token之后才可以访问界面
实现步骤:
1.清空token,window.sessionStorage.clear()
2.跳转 this.$router.push('/login')