前文

今天我们通过一个黑马程序员的一个小案例，来继续巩固Vuex方面的知识

一、准备部分

登录部分

看接口，定逻辑

（1）发请求前先校验手机号和短信验证码

（2）通过后，正常调用api发起请求，将数据存储在Vuex里

（3）在响拦截器中统一处理错误

分为三种情况：状态码不为200，状态为200，其它类型错误

（4）处理返回的token和userId

响应拦截器返回请求成功数据，登录组件接受数据，登陆组件调用Vuex暴露方法传递数据，Vuex调用storage.js中的方法去实现持久化存储数据

Vuex

token随着登录成功存储在本地，随着发起请求又被取出，那么storage.js中可以设计两种本地存储方法，存储和拿出数据功能

我们约定一个公共名称，去做统一命名存储和提取 storage.js

// 约定一个通用的键名
const INFO_KEY = 'hm_shopping_info'
const HISTORY_KEY = 'hm_history_list'

// 获取个人信息
export const getInfo = () => {
  const defauObj = { token: '', userId: '' }
  const result = localStorage.getItem(INFO_KEY)
  return result ? JSON.parse(result) : defauObj
}

// 设置个人信息
export const setInfo = (obj) => {
  localStorage.setItem(INFO_KEY, JSON.stringify(obj))
}

// 移除个人信息
export const removeInfo = () => {
  localStorage.removeItem(INFO_KEY)
}

（5）关于user模块的数据设计讨论

根据接口得出，用户模块存储用户id和用户token

user模块需要暴露一个同步方法，接受传入的用户id和用户token

user模块需要暴露一个异步方法，重置仓库

相当于Vuex存储一次数据，本地存储一次数据

Vuex的数据来源是本地，本地的数据来源是网络请求，借助Vuex方法传入

user.js

import { setInfo, getInfo } from '@/utils/storage'

export default {
  namespaced: true,
  state () {
    return {
      userInfo: getInfo()
    }
  },
  mutations: {
    setUserInfo (state, obj) {
      setInfo(obj)
    }
 }

（6）loading设置

场景：用户网速过慢，跳转时间变长

问题：在等待跳转时候，可以继续点击登录按钮，发起网络请求

解决方案:

1.设置防抖函数

2.使用Vant库自带Toast禁止背景点击方法

那么我们应该在哪里设置这个方法呢，又该在哪里停止呢，可以在请求拦截器中(为毛要停止，因为实操发现Toast组件，有自己的默认停止时间，我们的停止时间，应该参照请求，成功也就是拿到200状态码的时候)

(7) 全局导航守卫

场景：用户分两种，游客和已经登录，都试图通过路由访问高权限组件

问题：游客不应该访问到高权限组件

关键：

1.如何判断是否为已经登录？

当前网页检查token是否存在

2.如果未登录用户，如何让他路由被重定向到登录路由

注册全局路由守卫，拦截访问请求

解决方案：

前端学习（五）：智慧商城项目-用户模块部分

前文

一、准备部分

登录部分