vue element UI 學習總結筆記（八）_ 登錄驗證與token

登錄

登錄：當用戶填寫完賬號和密碼後向服務端驗證是否正確，驗證通過之後，服務端會返回一個token，拿到token之後（我會將這個token存貯到cookie中，保證刷新頁面後能記住用戶登錄狀態）

click事件觸發登錄操作:

    handleLogin() {
      // 這裏需要調用login的接口
      if (this.loginForm.year === '' || this.loginForm.admdivcode === '') {
        this.$message.error('請選擇年度和區劃！')
      } else {
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            this.loading = true
            this.$store.dispatch('Login', this.loginForm).then(() => {
            //動態路由
              this.loading = false
              this.$router.push({ path: this.redirect || '/' })
              //localStorage中保存用戶名、年度等信息
              var { username, year, admdivcode } = this.loginForm
              localStorage.setItem('year', year)
              localStorage.setItem('admdivcode', admdivcode)
              localStorage.setItem('username', username)
              console.log('保存了本地登陸信息。')
              isShow().then(res => {
                console.log('rrrr', res)
                res.data.paramvalue && this.$store.commit('SET_isShow', res.data.paramvalue)
              })
            }).catch(() => {
              this.loading = false
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    }

action:（user.js中）

    Login({ commit }, userInfo) {
      console.log('收到的用戶信息爲：', userInfo)
      const username = userInfo.username.trim()
      return new Promise((resolve, reject) => {
        login(username, userInfo.password, userInfo.year, userInfo.admdivcode).then(response => {
          const data = response.data
          setToken(data.token)
          commit('SET_TOKEN', data.token)
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },

       登錄成功後，服務端會返回一個 token（該token的是一個能唯一標示用戶身份的一個key），之後我們將token存儲在本地cookie之中，這樣下次打開頁面或者刷新頁面的時候能記住用戶的登錄狀態，不用再去登錄頁面重新登錄了。token我們在state中，也存儲了一份。

 commit('SET_TOKEN', data.token),我們把token當中也存了一份，我們request攔截器中，用到了token。

// request攔截器
service.interceptors.request.use(
  config => {
    if (store.getters.token) {
      config.headers['X-Token'] = getToken() // 讓每個請求攜帶自定義token 請根據實際情況自行修改
    }
    // showFullScreenLoading()
    startLoading()
    return config
  },
  error => {
    // Do something with request error
    console.log(error) // for debug
    Promise.reject(error)
  }
)

       localStorage中沒有存token信息 。token是登陸的時候存在cookie中的 ，登陸後又發送了獲取用戶信息的請求，將有用的用戶信息存到了localStorage中方便下次登陸使用。

    這裏的year這些信息，是用戶選擇的，只在login頁面有，如果想在action中存，取值很麻煩，不划算。

ps：這裏有個問題，什麼 情況數據存儲咋localstorage,什麼時候存在vuex，參考文檔：vuex存儲和本地存儲(localstorage、sessionstorage)的區別