首先熟悉一下token。

再熟悉一下前後端分離的token驗證機制

之後看程式碼。litemall-admin/src/permission.js

router.beforeEach((to, from, next) => {
  NProgress.start() // 這是網頁內容頂端的進度條。
  if (getToken()) { // 主要函式就在這裡了，這裡返回的是false。所以我們直接跳轉到else塊
     {
  } else {
    /* has no token*/
    if (whiteList.indexOf(to.path) !== -1) { // 在免登入白名單，直接進入
      next()
    } else {
      next(`/login?redirect=${to.path}`) // 否則全部重定向到登入頁
      NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it
    }
  }
})

我們進入getToken函式：

使用js-cookie元件讀取cookie中儲存的token。

當然現在是讀取不到的。之後重定向到了/login。

檢視login/index.vue原始碼。

其實我對template塊的疑慮很多，搜尋了很久都是千篇一律。這裡的一些程式碼就當作elementUI的固定寫法了。

關於promise我看到這裡終於理解是個啥了。總結來說就是為了非同步執行的一種方式。在c++裡面經常要用到指標函式作為callback。

而使用這種語法可以把執行函式與callback寫在一起。

handleLogin() {
  this.$refs.loginForm.validate(valid => {　　//進行校驗，其實我對這裡的寫法疑惑蠻多的。。。這裡應該是呼叫了配置的自定義校驗
 
規則，但這裡具體是怎麼執行的呢。。
    if (valid && !this.loading) {　　//valid驗證密碼是否符合規則，isloading應該是為了防止客戶不停的點選登入
      this.loading = true　　
      this.$store.dispatch('LoginByUsername', this.loginForm).then(() => {　　//這裡的語法比較長，請看組合Action與promise的catch
        this.loading = false　
        this.$router.push({ path: this.redirect || '/' })　　//登入成功後重定向到剛才訪問的url。
      }).catch(response => {
        this.$notify.error({
          title: '失敗',
          message: response.data.errmsg
        })
        this.loading = false
      })
    } else {
      return false
    }
  })
}

將token寫入cookies是在LoginByUsername中進行的。litemall-admin/src/store/modules/user.js

LoginByUsername({ commit }, userInfo) {
  const username = userInfo.username.trim()
  return new Promise((resolve, reject) => {　　//因為返回值要組合then()所以這邊返回一個Promise物件
    loginByUsername(username, userInfo.password).then(response => {
      const token = response.data.data.token
      commit('SET_TOKEN', token)　　//vuex儲存token
      setToken(token)　　//將token寫入cookies
      resolve()
    }).catch(error => {
      reject(error)
    })
  })
},

登入成功。

後臺的登入驗證過程請看這裡。