iview-admin 登录实现

登录流程
界面输入用户信息(@/view/components/login-form/login-form.vue)
->调用父组件的handleSubmit方法(@/view/login/login.vue)
->再调用Vuex actions 方法handleLogin(@/store/user.js)
->再调用axios方法login(@/api/user.js)
->请求后接口数据

一、@/view/login/login.vue页面修改handleSubmit方法

 handleSubmit({
        userName,
        password
      }) {
        this.handleLogin({
          userName,
          password
        }).then(res => {
          if (res.code == 0) {
            this.$router.push({
              name: this.$config.homeName
            })
          } else {
            this.$Message.error("账号密码错误");
          }
        })
      },

二、@/store/user.js修改handleLogin方法（登录）与handleLogOut方法（退出登录）

 // 登录
    handleLogin({
      commit
    }, {
      userName,
      password
    }) {
      userName = userName.trim()
      return new Promise((resolve, reject) => {
        login({
          userName,
          password
        }).then(res => {
          console.log(res)
          if (res.code == 0) {
            localStorage.setItem('token', res.res.token)
            localStorage.setItem('realName', res.res.realName)
            localStorage.setItem('userId', res.res.id)
            localStorage.setItem('userType', res.res.userType)
            localStorage.setItem('roleList', JSON.stringify(res.res.roleList))
            localStorage.setItem('resourceList', JSON.stringify(res.res.resourceList))
          }
          resolve(res)
        }).catch(err => {
          reject(err)
        })
      })
    },
    // 退出登录
    handleLogOut({
      state,
      commit
    }) {
      return new Promise((resolve, reject) => {
        /* logout(state.token).then(() => {
          commit('setToken', '')
          commit('setAccess', [])
          resolve()
        }).catch(err => {
          reject(err)
        }) */
        // 如果你的退出登录无需请求接口，则可以直接使用下面三行代码而无需使用logout调用接口
        localStorage.removeItem("roleList")
        localStorage.removeItem("resourceList")
        localStorage.removeItem("token")
        localStorage.removeItem("realName")
        localStorage.removeItem('userId')
        localStorage.removeItem('userType')
        commit('setToken', '')
        commit('setAccess', [])
        resolve()
      })
    },

三、@/api/user.js修改login方法

export const login = ({
  userName,
  password
}) => {
  const data = {
    userName,
    password,
  }
  return axios.request({
    url: 'login',
    data,
    method: 'post'
  })
}

四、@/libs/axios.js修改，token失效自动跳转登录页面

  interceptors(instance, url) {
    // 请求拦截
    instance.interceptors.request.use(config => {
      return config
    }, error => {
      return Promise.reject(error)
    })
    // 响应拦截
    instance.interceptors.response.use(res => {
    //20007和20008是后台接口返回的错误码
      if （res.data.code === 20007 || res.data.code === 20008) {
        // 说明 token 验证失败
        // 可以直接跳转到登录页面，重新登录获取 token
        location.href = Url[0].path
      }
      this.destroy(url)
      return res.data
    }, error => {
      return Promise.reject(error)
    })
  }

五、@/libs/axios.js修改，接口请求自动加token

 getInsideConfig() {
    const config = {
      baseURL: this.baseUrl,
      headers: {
        'Content-Type': 'application/json',
        'Authorization': localStorage.getItem('token')
      }
    }
    return config
  }

六、注意！！如果有mock的模拟数据，要注释掉，@/mock/index.js修改

import Mock from 'mockjs'
import { login, logout, getUserInfo } from './login'

// 配置Ajax请求延时，可用来测试网络延迟大时项目中一些效果
Mock.setup({
  timeout: 1000
})

// 登录相关和获取用户信息
// Mock.mock(/\/login/, login)
// Mock.mock(/\/get_info/, getUserInfo)
// Mock.mock(/\/logout/, logout)
// Mock.mock(/\/save_error_logger/, 'success')

export default Mock