主页-显示登录用户名-分析

将用户个人信息存到vuex中

在路由跳转时获取用户信息调用actions里面函数

在actions中定义函数在函数中调用发送用户信息请求通过context.commit('mutations里面函数',res.data)

在mutations函数中定义函数存储用户信息和清除用户信息

获取用户名

获取用户头像

getters便捷写法

实现退出功能

1.提示询问框

2.清除token

3.清空用户信息

从哪退出登录后回到哪

定义logout() 通过element组件

通过this.$route.fullPath获取到当前路由的所以路径信息

编码处理内置方法encodeURIComponent() 解码处理方法decodeURIComponent()

在login的index.vue中

async doLogin() {
      try {
        // 在组件中调用带命名空间的action

        // dispatch是异步的，需要加async await
        await this.$store.dispatch('user/userLogin', this.loginForm)
        // 登录成功，路由跳转  获取当前页面的路径参数
+        this.$router.push(this.$route.query.return_url || '/')
      } catch (err) {
        alert('用户登录，失败')
        console.log('用户登录，失败', err)
      }
    },

在navbar.vue 的logout中

logout() {
      // 弹层询问，是否退出
      this.$confirm('你确定要离开吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 确认
        // 删除信息
        await this.$store.dispatch('user/userLogout')
        // 去到登录页
        // this.$router.push('/login?return_url=当前的路径')
        // 跳转路由-回登陆
        // 如何获取当前页面的地址 : this.$route.fullPath
        // this.$route.path只有路径的信息
        // this.$route.fullPath：路径+查询参数的信息
+       this.$router.push('/login?return_url=' + encodeURIComponent(this.$route.fullPath))
      }).catch(() => {

      })
    }

router和route

router全局路由跳转