***ログイン検証と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(ユーザーIDを一意に示すkey)を返します.その後、tokenをローカルクッキーに格納します.これにより、次回ページを開くか、ページをリフレッシュするときにユーザーのログイン状態を覚え、ログインページに再ログインする必要はありません.token私たちはstateにも1部保存しました.
commit('SET_TOKEN',data.token)では、tokenの中にも1部保存し、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はログイン時にクッキーに存在し、ログイン後にユーザー情報の取得を要求し、役に立つユーザー情報をlocalStorageに保存して次回のログインに便利です.
ここのyearこれらの情報は、ユーザーが選択したもので、loginページにしかありませんが、actionに保存したい場合は、値を取るのが面倒で、お得ではありません.
ps:ここで問題があります.データの格納方法localstorage、vuexがいつ存在するか、参考ドキュメント:vuexストレージとローカルストレージ(localstorage、sessionstorage)の違い