使用vue-element-admin的登陆流程

1.在登陆组件搭建好登陆页面，对表单进行校验

 loginRules: {
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 16, message: '密码长度必须6-16位', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
        ],
        isAgree: [{
          // rule:当前校验规则，value：当前文本框的值，callback：决定成功还是失败的回调
          validator: (rule, value, callback) => {
            // 如果勾选框已勾选，校验成功，否则校验失败
            if (!value) {
              // 校验失败，传error对象参数
              callback(new Error('请勾选用户平台协议'))
            } else {
              // 表示放行
              callback()
            }
          }
        }]
      }

2.在utils/request里面引入axios，创建axios实例并设置基地址

//引入axios
import axios from 'axios'

// 创建axios实例
const service = axios.create({
  // baseURL: 'http://localhost:9528/api',
  // 如果没有写具体域名，那么会自动使用当前页面所在服务器域名
  // baseURL: '/api',
  // 基地址从环境变量中读取，这样就可以在开发和上线阶段自动切换服务器地址
  baseURL: process.env.VUE_APP_BASE_API,
  // 请求超时时间：如果超过10秒钟，就不再等待服务器的响应，直接报错
  timeout: 10000
})

// 把axios实例暴露出去
export default server

3.在发起请求之前，需要在utils/request里面设置响应拦截器，把服务器返回来的数据进行解构

// 响应拦截器
service.interceptors.response.use(response => {
  // 一旦响应成功，都会走到这个方法中解构出token
  const { data, message, success } = response.data
  // 判断是否成功
  if (success) {
    // 直接返回最终的数据
    return data
  } else {
    // 如果响应成功，但业务上是失败的，就会走到这个错误中
    // 给错误提示
    Message({
      type: 'error',
      message
    })
    // 返回失败的Promise
    // 作用：调用Promise的地方就会出现异常
    return Promise.reject(new Error(message))
  }
}, error => {
  // 一旦网络访问有问题，比如断网，或服务器没有响应，状态码不是200，就会走到这个错误中
  // 判断状态码是否是401，如果401，表示token过期，需要清除token等信息后，跳到登录页让用户重新登录
  if (error.response.status === 401) {
    Message({
      type: 'warning',
      message: '登录超时'
    })
    // 清除登录信息
    store.dispatch('user/logout')
    // 跳到登录页
    router.push('/login')
    return Promise.reject(error)
  }
  // 给错误提示
  Message({
    type: 'error',
    message: error.message
  })
  return Promise.reject(error)
})

4.设置请求拦截器，把vuex中储存的token注入到每一次的http请求里，因为除了登陆，其他请求都需要携带token

// 请求拦截器
service.interceptors.request.use(config => {
  // config是请求对象
  // 加请求头Authorization, 值是token
  // 注意：这里的this不是vue实例，所以不能通过this拿store对象
  // this.$store.getters.token
  // store.getters.token
  // 如果有token，就带上去
  if (store.getters.token) {
    config.headers.Authorization = `Bearer ${store.getters.token}`
  }

  // 返回请求对象
  return config
}, error => {
  // 请求失败，会走到这里
  return Promise.reject(error)
})

在gettes里面导出store里面的state下面储存的token 

5.在vuex中储存服务器返回来的token数据，并引入utils/auth里token的方法，在本地初始化的时候调用取出token的方法，取出token设置为初始值

// 原则：数据在哪里，那么这个数据的增删改查的相关操作就应该写在哪里
import { getToken, setToken, removeToken } from '@/utils/auth'

// token存储在了两个地方：Vuex，本地存储（cookie）
const state = {
  // 用户登录的认证信息（令牌）
  // 初始化的时候从本地取token
  token: getToken(),
}

6.在vuex中的actions里面添加异步调用接口的方法

const actions = {
  // 异步实现登录的方法
  async login(context, loginForm) {

    //调用登陆接口获取token
    // 使用awiat接收promise成功的值
    const token = await login(loginForm)
    // 把获取到的token提交给mutations里面的方法，把token赋值给state里面储存token的变量
    context.commit('setToken', token)
  }
}

7.在vuex中的mutations里面添加方法，把actions提交过来的token赋值给储存token的变量，并在本地储存一份

const mutations = {
  setToken(state, token) {
    // 往vuex存一份
    state.token = token
    // 往本地cookie存一份
    setToken(token)
  }
}

8.在utils/auth.js里面设置本地储存的位置

// js-cookie是一个第三方模块，方便我们对cookie进行操作
// 默认有效期是会话性，浏览器关闭就会消失
// 这里储存在cookie里面
import Cookies from 'js-cookie'
const TokenKey = 'vue_admin_template_token'
// 取token的方法
export function getToken() {
  return Cookies.get(TokenKey)
}
// 存token的方法
export function setToken(token) {
  return Cookies.set(TokenKey, token)
}
// 删除token的方法
export function removeToken() {
  return Cookies.remove(TokenKey)
}

9.在登陆组件进行表单提交的整体校验，校验通过后调用actios里面的登录方法，并把参数传递过去，之后强制跳转到首页

methods: {
    login() {
      // 1. 拿到elForm表单对象
      // this.$refs.form
      // 2. 调用validate方法对整个表单进行验证
      this.$refs['form'].validate(async success => {
        if (success) {
          // 校验表单成功
          // alert('表单校验成功！')
          // 调用vuex的actions中的login方法获取token
          // 用await修饰，确保登录接口调完之后再跳转路由页面
          await this.$store.dispatch('user/login', this.loginForm)
          // 跳到首页 layout  /
          this.$router.push('/')
        }
      })
    }
  }

至此登陆流程就完成了！！！