前端登录，进不去？来看看是什么阻碍了你

登录是每个网站中都经常用到的一个功能，在页面上我们输入账号密码，敲一下回车键，就登录了，但这背后的登录原理你是否清楚呢？接下来我们用超详细的过程向你解释点击了登录之后请求是怎么发出去的~

1. utils/validate.js ---> validMobile 验证手机号和密码，先进行正则校验再进行兜底校验
   这里简单介绍一下验证的步骤：
   1)定义验证规则。data()中按照格式定义规则
   2)在模板上做属性配置来应用规则(三个配置)
      给表单设置rules属性传入验证规则
      给表单设置model属性传入验证规则
      给表单项(Form-Item)设置prop属性，其值为设置为需要校验的字段名
   3)手动兜底校验(为了防止跳过验证直接发请求) 2. 调用 api/user.js中封装好的api

 1.  找到axios实例：utils/request.js中获取axios实例
 2.  设置基地址从环境变量中
     1.
     const service = axios.create({
      baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
      // withCredentials: true, // send cookies when cross-domain requests
      timeout: 5000 // request timeout
    })
    2.
    # base api 设置基地址
    #VUE_APP_BASE_API = 'http://localhost:3000/api'
    #这里http://localhost:3000就不用加了，为了保证请求和代理服务器保持同源(见第5点)
    VUE_APP_BASE_API = '/api'

3.收集用户的参数，传给上一步中的api。（页面上收集页面的数据项名与接口中一致）

4.经过请求拦截器，添加请求头（添加token， utils/request.js）

// request interceptor
service.interceptors.request.use(config => {
  console.log(config) // config是请求配置项，里面是有headers这个属性的
  const token = store.state.user.token
  if (token) {
    config.headers['Authorization'] = `Bearer ${token}`
  }
  return config
},
error => {
  // do something with request error
  console.log(error) // for debug
  return Promise.reject(error)
})

5.代理转发(vue.config.js)

在devServer中新增一个proxy属性
    // ... 省略
    // 代理配置,解决跨域问题 env.davelopment =>request 设置基地址 =>vue.config
    proxy: {
      // 如果请求地址以/api打头,就触发代理机制
      // http://localhost:9588/api/login -> http://localhost:3000/api/login
      '/api': {
        target: 'http://localhost:3000' // 我们要代理的真实接口地址
      }
    }

6.后端要启动服务器，MongoDB也要启动，这样后端才能收到请求，返回数据

7.经过响应拦截器的处理(utils/request.js)

1) 判断当前操作是否成功，决定是否axios报错
2) 简化获取有效数据的写法(脱壳)
// response interceptor
service.interceptors.response.use(
  res => {
    if (res.data.success) {
      return res.data // 脱壳
    } else {
      return Promise.reject(new Error(res.data.message))
      // 返回错误提示，解决出错不报错问题
    }
  },

  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

8.得到api调用之后结果（login.vue）

9.保存token到vuex（store/modules/user.js）

 采用模块化的方式
 state: () => ({
    token: setToken() || null
  }),
  mutations: {
    setToken(state, newToken) {
      // vuex
      state.token = newToken
      // 持久化
      setToken(newToken)
    }
  }
  
  在前端页面上
  // 登录成功后提交mutation
        // 1.把token保存到vuex
        this.$store.commit('user/setToken', res.data)

10.token做持久化(utils/auth.js)