Vue登录状态管理流程

用户输入用户名密码给后台发送请求

登录

methods里引入...mapActions

methods: {
    ...mapActions(['handleLogin', 'getUserInfo']),

登录submit方法里调用mapAction,传入用户名密码

async submit() {
      let result = await this.$refs.forms.validate()
      if (!result) return
      let { userName, password } = this.forms
      this.handleLogin({ userName, password }).then(res => {
        this.getUserInfo(userName).then(res => {
          this.$router.replace({ name: 'home' })
        })
      })
    },

store下的内容

 

store action中处理登录

mutation中写法

引入setToken，setUserName方法

libs util.js中setToken，setUserName方法

上面一系列过程是在处理登录，再回过头看看登录页 处理完登录的操作还有个获取用户信息getUserInfo的接口，这又是一个Vuex中的action

 再回头看store action下getUserInfo,把获取数据存到Vuex state里，这样就完成了Vuex的存储功能。

 

其他组件获取用户信息就可以通过 computed 中...mapState获取

如果页面刷新，Vuex存储内容清空获取不到内容怎么办？

这时就要通过路由拦截，根据cookie里存的token请求getUserInfo接口，重新获取用户信息然后再存到Vuex中。 

综上，就完成了Vuex加路由管理 用户登录信息的操作。