vue-element--admin登录源码逻辑----获取token

vue 登录权限分两步，第一步获取token，然后根据token获取权限信息

登录页面点击登录调用的方法

  this.$refs.loginForm.validate((valid) => {
        // debugger
        // 2.如果表单验证通过
        if (valid) {
          this.loading = true
          // 3.调用登录
          this.$store
            .dispatch('user/login', this.loginForm)
            .then((res) => {
              // 此处的res是什么 取决于 user/login  resolve 的值
              // resolve(123) 此处接受123
              // resolve()  此处接受的是  underfined  但是代码会继续执行
              console.log('login res', res)
              console.log(11111)
              this.$router.push({
                path: this.redirect || '/',
                query: this.otherQuery
              })
              this.loading = false
            })
            .catch((error) => {
              // reject 走这里  resolve 走上面
              alert(error)
              console.log('------------------------', error)
              this.loading = false
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }

vuex 的user模块下的login异步方法

const actions = {
  // user login  用户登录  vuex里面 user模块下面的login方法
  login({ commit }, userInfo) {

    //解构出用户名和密码
    const { username, password,code } = userInfo;
    // console.log('*******', username, password, code)
    // return ;
    return new Promise((resolve, reject) => {
      // reject(88888);  被 catch接受
      //调用api/user里面的login方法  接口请求
      login({ username: username.trim(), password: password ,code:code}).then(response => {
        // console.log('4444444444444444444444444');return;
        const { token,expireTime } = response
        //把后端返回的token存到vuex中
        commit('SET_TOKEN', token)
        //把后端返回的token存到cookies里面
        setToken(token)
        //设置token过期时间
        setTokenTime(expireTime)
        resolve(123)  // 前面的方法  回调接受到 123
        resolve(); // 没有返回值  但是 代码会继续向下走
      }).catch(error => {
        reject(error)
      })
    })
  },


  const mutations = {
  SET_TOKEN: (state, token) => {
    state.token = token
  }
}

const state = {
  token: getToken(),
}

auth.js中封装的对应方法

import Cookies from 'js-cookie'

const TokenKey = 'Admin-Token'

export function getToken () {
  return Cookies.get(TokenKey)
}
export function setToken (token) {
  return Cookies.set(TokenKey, token)
}

//设置token过期时间
export function setTokenTime (time) {
  return sessionStorage.setItem(timeKey, time)
}