详解Vuex管理登录状态

// 这个官方名字叫导航守卫，挺形象的
router.beforeEach((to, from, next) => {
 // 如果是去登录或注册，那就先把user移除
 if (to.path === '/login' || to.path === '/regin') {
  sessionStorage.removeItem('user')
 }
 let user = JSON.parse(sessionStorage.getItem('user'))
 if (!user && (to.path === '/manger/my' || to.path === '/manger/send' || to.path === '/manger/history')) {
  next({ path: '/login' })
 } else {
  next()
 }
})

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
// 创建基本状态
const state = {
 // 登录状态为没登录
 logined: false,
 // 用户信息数据,目前只需要avatar和name,还是把username也加上吧
 LoginedUser: {
  name: '',
  avatar: '',
  username: ''
 }
}
// 创建改变状态的方法
const mutations = {
 // 改变状态的方法也需要2个，一个是登录或注册了，一个是登出了
 // 这里不能写箭头函数"text-align: center">

应该是这样的，注册也是一样

然后是登出的页面


header.vue

同时我们就不在创建页面的时候从sessionStorage取数据了


还有一个main.js

要是不能在main.js里面生效还真是麻烦啊，试想一下，已登录用户直接去了/login页面，seeionStorage里面用户数据清除了，但store里面的数据又没更新，那在头部不是还挂一个头像啊"text-align: center">
还是赶紧测试一下吧


哭了.....直接四个错误

这我都是照着官方说的写的啊
 
把header.vue的数据注释掉，还有一个错误

但这个dispatch 是undefined 是啥意思啊，我是照着写的啊，大佬帮我解惑一下啊

把dispatch 改成context 也不行


改成commit 试一下

还是一样没脾气了，我再去看看资料吧


研究了好久解决了一部分问题
首先我把store.js，里面的action写成了这样



但我觉得原来的写法也没有错
然后在main.js里面注释掉了这句



然后就正常了，dispatch是正确的，所以我所担心的事果然发生了
先去登录




可以看见header右上方的确立刻变成了用户信息，达到了要求，然而我要是自己去地址栏输入/login






跳到了登录页面，但头像真的还挂在右上角........，说明store里面真的还是登录的数据，虽然仔细想想其实这并没有什么影响，他要是再一次登录成功，数据自然也就变了，而且一般没人会这么去访问登录页面，但心里觉得这样不对啊。
而且我觉得这个action的分发应该有办法写在main.js里面的，不知道有没有大神指点一二！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。