vuex和sessionStorage使用有感
一.vuex和sessionStorage单独使用用户发送登录请求(成功)用户相关信息存到sessionStorage中加载菜单状态置为false,存放到vuex中跳转到首页(/)router.beforeEach拦截若访问login未认证,跳转到login (sessionStorage是否有user)已认证,跳转到首页若访问首页未...
·
一.vuex和sessionStorage单独使用
- 用户发送登录请求(成功)
- 用户相关信息存到sessionStorage中
- 加载菜单状态置为false,存放到vuex中
- 跳转到首页(/)
- router.beforeEach拦截
- 若访问login
- 未认证,跳转到login (sessionStorage是否有user)
- 已认证,跳转到首页
- 若访问首页
- 未认证,跳转到login
- 加载动态菜单
- 加载动态菜单
- 处理嵌套页面
- 判断菜单状态是否为已加载,若已加载,返回,跳转到首页
- 根据用户名向后台请求其相应的菜单
- 将菜单的component转为路由组件,转换好后的加入到router中
- 加载菜单的状态置为true,存放到vuex
- 后台返回的菜单数据存入vuex中
- 根据用户名向后台请求其权限信息
- 权限信息存入到vuex中
- 跳转到首页
- 加载动态菜单
- 若访问login
- 加载主页的信息 vuex(菜单,菜单状态,权限信息) sessionStorage(用户相关信息)
- 点击其他页面,进入2
- 刷新
- 点击其他页面,进入2
- 退出
- sessionStorage.removeItem("user")
- window.location.reload()
- 清除其他存放在sessionStorage中的数据
二.vuex和sessionStorage结合使用
同上,将存放在sessionStorage中的数据放入vuex中
5.刷新
App.vue
created () {
//在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener("beforeunload", () => {
console.log("存vuex前的数据")
console.log(this.$store.state,JSON.parse(sessionStorage.getItem("store")))
sessionStorage.setItem("store", JSON.stringify(this.$store.state))
console.log("存vuex后的数据")
console.log(this.$store.state,JSON.parse(sessionStorage.getItem("store")))
})
// 在页面加载时读取sessionStorage里的状态信息
if (sessionStorage.getItem("store")) {
console.log("读取sessionstorage前的数据")
console.log(this.$store.state,JSON.parse(sessionStorage.getItem("store")))
this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem("store"))))
console.log("读取sessionstorage后的数据")
console.log(this.$store.state,JSON.parse(sessionStorage.getItem("store")))
}
}
7.退出
logout: function() {
this.$confirm("确认退出吗?", "提示", {
type: "warning"
}).then(() => {
this.$store.state.tab.mainTabs=[];
sessionStorage.removeItem("user")
this.$router.push("/login")
//顺序不能反,且两个中的任何一个都不能少
window.location.reload()
sessionStorage.setItem("store", null)
this.$api.login.logout().then((res) => {
}).catch(function(res) {
}) }).catch(() => {})
}
注意:
window.location.reload()
sessionStorage.setItem("store", null)
若将reload省略,会出现退出登录后,vuex还在,这时,如果手动刷新界面,会再一次调用App里面的created的两段代码,这时,sessionStorage又会出现vuex的值
若两句话调换一下位置,和上面是一个效果,只是一个是手动刷新,一个是代码刷新
执行顺序:
经过测试,得到的代码执行顺序如下:
reload执行时,会跳转到App.vue中的beforeunload,
App.vue中的beforeunload执行完成后回到reload下面的代码,此时vuex被置为原始值,sessionStorage被置null
执行完退出函数后,执行app.vue中的sessionStorage.getItem("store")
更多推荐
已为社区贡献1条内容
所有评论(0)