VueX,VueRouter,登录验证相关
Vuex
四部分:State,Mutation,Action,Module
提交方式:Mutation -> commit、Action -> dispatch (this.$store上的方法)
mutation是纯同步操作,action中包括异步操作和提交mutation的操作
Vue-router
单页面应用时使用,使用this.$router和this.$route两个组件中的某些方法,如
this.$route.params['name']获取路由中的参数
this.$router.push(name, param)控制路由的跳转
this.$router.beforeEach(to, from, next)在每次路由跳转中进行某些操作
在路由的定义中,使用import(xxx.vue)实现路由的懒加载,redirect实现从根目录中跳转到登录界面。
登录验证
原本设想:每次向后端提交请求时服务器查看session进行验证,但是服务器无法保存session,每次提交的请求都是不同的SessionID。
原因:由于在Vue-router下的history模式下每个路由的cookie不共享,导致每次提交的cookie不同,因而sessionID也不同,尝试在main.js中设置cookie的path为'/',无果
最后解决方案:浏览器端保存自己的cookie,如第一次请求时服务端返回的一个token,每次请求时提交,服务端在每次请求时验证提交的token是否过期,如果过期则返回拒绝请求,浏览器在收到拒绝请求后清空自己的cookie并跳转回登录路由。