vue element從0到1之(二)從login.vue到store user.js Login

https://gitee.com/elunez/eladmin-web/blob/master/src/views/login.vue

src/views/login.vue的代碼很好理解，很快我們就找到了提交的入口：handleLogin

handleLogin() {
      this.$refs.loginForm.validate(valid => {
        const user = {
          username: this.loginForm.username,
          password: this.loginForm.password,
          rememberMe: this.loginForm.rememberMe,
          code: this.loginForm.code,
          uuid: this.loginForm.uuid
        }
        if (user.password !== this.cookiePass) {
          user.password = encrypt(user.password)
        }
        if (valid) {
          this.loading = true
          if (user.rememberMe) {
            Cookies.set('username', user.username, { expires: Config.passCookieExpires })
            Cookies.set('password', user.password, { expires: Config.passCookieExpires })
            Cookies.set('rememberMe', user.rememberMe, { expires: Config.passCookieExpires })
          } else {
            Cookies.remove('username')
            Cookies.remove('password')
            Cookies.remove('rememberMe')
          }
          this.$store.dispatch('Login', user).then(() => {
            this.loading = false
            this.$router.push({ path: this.redirect || '/' })
          }).catch(() => {
            this.loading = false
            this.getCode()
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }

在this.$store.dispatch('Login', user) 之前的代碼我們都看的很清楚，都是順序執行，沒有什麼跳躍，但是突然到了這個dispatch，徹底迷路了，這是個什麼鬼，調用了哪裏的代碼呢，也不說一下。

看到store於是去store裏面找，終於在store/modules/user.js裏面找到了 https://gitee.com/elunez/eladmin-web/blob/master/src/store/modules/user.js

說實話這樣的調用實在很不厚道，這就是我們迷亂的原因，程序的執行沒有明確的指向，僅憑一個字符串就讓我們到處找。

那麼這個actions到底是怎麼一回事呢。通過官方文檔我們知道幾個重要的信息 https://vuex.vuejs.org/zh/guide/actions.html

Action 通過 store.dispatch 方法觸發：

• Action 可以包含任意異步操作。

他們都是vuex的概念。vuex又是什麼？你可以把它理解一個全局變量的操作類，你只能通過這個操作類來操作全局變量，這樣纔不至於滿世界找到底是誰不小心改變了全局變量。集中改變的好處，就是能夠寫工具來監控變量的改變，你想別人都調用你的方法來執行操作，你就可以在你的代碼裏面加入berore和after來做更多的處理了。

function changeA(parameter){
   before();
   a=parameter
   after();
}

那handleLogin到底做了什麼？

1.它調用了login這個api，import {login, getInfo, logout} from '@/api/login'，很顯然這個接口傳入用戶名密碼並返回了用戶相關的信息。https://gitee.com/elunez/eladmin-web/blob/master/src/api/login.js

2.它保存了token，在import {getToken, setToken, removeToken} from '@/utils/auth' 這個裏面它把token保存到了cookie裏面

https://gitee.com/elunez/eladmin-web/blob/master/src/utils/auth.js

3.它將token保存爲了vuex的全局變量

4.它設置了用戶的基本信息到全局變量 state.user，並且保存了角色信息。

state: {
  token: getToken(),
  user: {},
  roles: [],
  // 第一次加載菜單時用到
  loadMenus: false
}

Login({commit}, userInfo) {
      const rememberMe = userInfo.rememberMe
      return new Promise((resolve, reject) => {
        login(userInfo.username, userInfo.password, userInfo.code, userInfo.uuid).then(res => {
          setToken(res._sessionToken, rememberMe)
          commit('SET_TOKEN', res._sessionToken)
          setUserInfo(res, commit)
          // 第一次加載菜單時用到， 具體見 src 目錄下的 permission.js
          commit('SET_LOAD_MENUS', true)
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    }

this.$store.dispatch('Login', user) 第一個'Login'這個是actions的名字，第二個user，這個是參數，一段代碼的引用僅僅通過一個字符串來關聯，而且這個字符串貌似是全局屬性的，那麼如果我隨便寫在一個地方，這不是成心讓人迷路嗎，這樣的設計令人懷疑。

login提交了之後程序又去了哪裏呢？

this.$store.dispatch('Login', user).then(() => {
  this.loading = false
  this.$router.push({ path: this.redirect || '/' })
}).catch(() => {
  this.loading = false
  this.getCode()
})

我們看到程序的路由指向了，this.$router.push({ path: this.redirect || '/' })，而this.redirect在login.vue裏面定義爲undefined，所以成功之後用戶跳轉到了"/"，我們又要去看router/index.js裏面對這個url的攔截了。