登录功能的简单处理

vuex中配置请求

import Vue from 'vue'
import Vuex from 'vuex'
import { loginAPI } from '@/api'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    token: localStorage.getItem('token') || '',
    refresh_token: localStorage.getItem('refresh_token') || ''
  },
  mutations: {
    setToken (state, token) {
      state.token = token
      localStorage.setItem('token', token)
    },
    setRefreshToken (state, refreshToken) {
      state.refresh_token = refreshToken
      localStorage.setItem('refresh_token', refreshToken)
    }
  },
  actions: {
    async asyncLoginAction (store, val) {
      try {
      // 点击登录按钮之后发起请求 拿到token 和refreshToken 触发mutations 把它们存储到vuex和本地中
        const res = await loginAPI(val)
        // eslint-disable-next-line camelcase
        const { token, refresh_token } = res.data
        store.commit('setToken', token)
        store.commit('setRefreshToken', refresh_token)
        return Promise.resolve(res)
      } catch (error) {
        return Promise.reject(error)
      }
    }
  },
  modules: {
  }
})

登录模块中触发actions

<script>
import { mapActions } from 'vuex'
export default {
  name: 'Login',
  data () {
    return {
      formLogin: {
        mobile: '13888888888',
        code: '246810' // 默认只能用246810后台规定了
      },
      isLoding: false // 加载状态
    }
  },
  methods: {
    ...mapActions(['asyncLoginAction']),
    async onSubmit () {
      this.isLoding = true
      try {
        await this.asyncLoginAction({ ...this.formLogin })
        this.$notify({ type: 'success', message: '登录成功' })
        this.isLoding = false
         this.$router.replace('/layout')
      } catch (error) {
        this.$notify({ type: 'warning', message: '手机或密码错误' })
        console.log(error)
      }
    }
  }
}
</script>