前端登录过程浅薄理解

import Vue from 'vue'
import Vuex from 'vuex'
import { getLogin } from '../request/api.js'
import router from '../router/index'
Vue.use(Vuex)
​
const state = {
  ruleForm: {
    user: '',
    pwd: ''
  },
  result: null,
  title: ''
}
const mutations = {
  setLogin (state, param) {
    state.result = param.result
  },
  setUser (state, n) {
    state.ruleForm.user = n
  },
  setPwd (state, n) {
    state.ruleForm.pwd = n
  }
}
const actions = {
  getLogin (context) {
    getLogin().then(res => {
      console.log(res.data)
      context.commit('setLogin', { result: res.data })
      let len = res.data.length
      let userNameArr = []
      let passWordArr = []
      let ses = window.sessionStorage
      for (var i = 0; i < len; i++) {
        userNameArr.push(res.data[i].username)
        passWordArr.push(res.data[i].password)
      }
      if (userNameArr.indexOf(state.ruleForm.user) === -1) {
        alert('账号不存在！')
      } else {
        var index = userNameArr.indexOf(state.ruleForm.user)
        if (passWordArr[index] === state.ruleForm.pwd) {
          // 把token放在sessionStorage中
          ses.setItem('token', res.data[index].token)
          console.log(ses, 'ses')
          state.title = res.data[index].usertitle
          //跳转到首页
          router.push('/')
        } else {
          alert('密码错误！')
        }
      }
    })
  },
  loginOut () {
    // 注销后 清除session信息 ，并返回登录页
    window.sessionStorage.removeItem('data')
    router.push('/login')
  }
}
export default new Vuex.Store({
  state,
  mutations,
  actions
})
​

以上为整个 store.js 文件，下面将整体化为多个具体代码段进行分析

part 1

import Vue from 'vue'
import Vuex from 'vuex'
import { getLogin } from '../request/api.js'
import router from '../router/index'
Vue.use(Vuex)
​
const state = {
  ruleForm: {
    user: '',
    pwd: ''
  },
  result: null,
  title: ''
}

1. 引入需要用到的api文件
2. 引入router（登录完跳转需要用到router）

3. store.js 中的 state 可以简单理解为 vue 文件中的 data

part 2

const mutations = {
  setLogin (state, param) {
    state.result = param.result
  },
  setUser (state, n) {
    state.ruleForm.user = n
  },
  setPwd (state, n) {
    state.ruleForm.pwd = n
  }
}

1. mutations 用来改变 state 中的数据
2. 接收的两个参数分别为，state：当前的 state 对象，n：自定义参数

插入一段登录页 vue 文件的代码对 mutations 加以解释

  computed: {
    user: {
      get () {
        return this.$store.state.ruleForm.user
      },
      set (newVal) {
        this.$store.commit('setUser', newVal)
      }
    },
    pwd: {
      get () {
        return this.$store.state.ruleForm.pwd
      },
      set (newVal) {
        this.$store.commit('setPwd', newVal)
      }
    }
  },

当 user 和 pwd 的值发生改变的时候，触发计算属性中的 set 方法，*this.$store.commit('setUser', newVal)*调用storemutations 中的 setUser，这时 newVal 就是传递过来的自定义参数 n

part 3

const actions = {
  getLogin (context) {
    // 从后端获取登录信息
    getLogin()
      .then(res => {
        const loginData = res.data
​
        // 提交登录信息到store
        context.commit('setLogin', { result: loginData })
​
        // 从登录数据中提取用户名和密码
        const userNames = loginData.map(item => item.username)
        const passwords = loginData.map(item => item.password)
​
        const session = window.sessionStorage
​
        // 检查用户是否存在
        const userIndex = userNames.indexOf(state.ruleForm.user)
        if (userIndex === -1) {
          alert('账号不存在！')
        } else {
          // 验证密码
          const passwordMatch = passwords[userIndex] === state.ruleForm.pwd
          if (passwordMatch) {
            // 将token存储在sessionStorage中
            session.setItem('token', loginData[userIndex].token)
            state.title = loginData[userIndex].usertitle
​
            // 跳转到首页
            router.push('/')
          } else {
            alert('密码错误！')
          }
        }
      })
      .catch(error => {
        console.error('登录失败:', error)
      })
  },
​
  loginOut () {
    // 注销后，清除session信息，并返回登录页
    window.sessionStorage.removeItem('token')
    router.push('/login')
  }
}

1. 在 action 中主要声明了两个事件，登录和退出登录

2. 登录操作：主要做了如下几个事情

   1. 获取全部的用户信息（用户名，密码 等信息）
   2. 先检查数据库中是否有此用户
   3. 根据用户名匹配数据库中对应的密码是否相同
   4. 密码匹配成功后，将后端返回的 token 存储到 sessionStorage 中
   5. 跳转页面

3. 退出操作：清除 sessionStorage 中储存的信息

`window.localStorage.setItem(key,value);//设置指定key的数据（JSON格式）
​
window.localStorage.getItem(key);//获取指定key的数据
​
window.localStorage.removeItem(key);//删除指定key的数据
​
`window.localStorage.clear();//清空所有的存储数据``
​