修改element-ui-template 登录接口 api login

折腾了好几天值得记录一下，用的是花裤衩的element-ui-template模板，后台接口是公司写好的。

难点主要在登录和获取用户信息，和模板上的有出入，公司的登录api请求后直接返回token、用户分组、用户头像，不用再次请求用户信息。

退出时，公司的后端没有token销毁接口，由浏览器直接销毁。

1.修改登录接口

在api/user中找到login函数

import request from '@/utils/request'

export function login(data) {

  return request({
    url: '/v1/business/login', //改成你的接口
    method: 'post',
    data,

  })
}

修改.env.development文件中BASE_API为空

# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_API = '' //这里改为空

修改utils/request.js中BASE_URL和状态码

// create an axios instance
const service = axios.create({
  baseURL: 'http://47.105.172.000/serverPensionAdmin/api', // 改成你自己的 
  //url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

改状态码

response => {
    const res = response.data

    // if the custom code is not 20000, it is judged as an error.
    if (res.httpCode !== 200) {
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })

      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        // to re-login
        MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
          confirmButtonText: 'Re-Login',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(() => {
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        })
      }
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },

在utils/validate中修改允许登录的用户名

export function validUsername(str) {
  const valid_map = ['admin', 'editor', 'yufeng'] //原来只允许两个，yufeng是我加上去的，根据实际情况修改
  return valid_map.indexOf(str.trim()) >= 0
}

修改登录字段，如果你的登录字段为username和password就不用修改，恰好我的登录字段为account，因此需要修改下，store/modules/user

 // user login
  login({ commit }, userInfo) {
    const { username, password } = userInfo
    console.log('打印response 前');
    return new Promise((resolve, reject) => {
      login({ account: username.trim(), password: password }).then(response => {
        console.log('打印response',response);
        this.dd = response
        const  {result}  = response

2.注释掉getInfo和logout引用

注释掉getInfo，改用自建函数给头像和用户分组赋值
src根目录下permission

if (hasToken) {
    if (to.path === '/login') {
      // if is logged in, redirect to the home page
      next({ path: '/' })
      NProgress.done()
    } else {
      const hasGetUserInfo = store.getters.name
      console.log('print hasGetUserInfo------->', hasGetUserInfo);
      if (hasGetUserInfo) {
        next()
      } else {
        try {
          // get user info
          console.log('permission userinfo');
          // await store.dispatch('user/getInfo')   //去掉这一行之后竟然可以登陆了
          await store.dispatch('user/login2') //这是自建函数，给头像和用户分组赋值


          console.log('permission userinfo222222222222');

自建函数, 给头像和用户分组赋值 store/modules/user.js

  // test
  login2() {
    console.log('this is a test ----------------->', this.dd);
    //设置头像和用户权限
    const name = this.dd.result.bname
    const avatar = this.dd.result.headUrl
    //
    state.name = name
    state.avatar = avatar
  },

因为不用请求退出api，所以在layout/components/Navbar.vue中，注释掉logout函数，直接用本地清除token的方式，

methods: {
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
    },
    async logout() {
      // await this.$store.dispatch('user/logout') 请求登出api,因为后台pc端暂时不用请求退出api,直接清掉token即可退出
      await this.$store.dispatch('user/resetToken')
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    }
  }
}

至此，登陆问题解决，上图

[在这里插入图片描述](https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA3UzhaSWxseTFnaGJkb3JobzFvajMwc3kwdGN3bmguanBn?x-oss-process=image/format,png =200x200)

参考文章
vue-element-admin-master修改为自己的登录接口

Promise resolve()的用法

【vue】前端必须掌握的登陆 token 处理（ Vue 登陆处理 token 的补充）

在Vuex使用 以及 dispatch和commit来调用mutations的区别

store/module/user.js

有需要的同学可以参考下

import { login, logout, getInfo } from '@/api/user'
import { getToken, setToken, removeToken } from '@/utils/auth'
import { resetRouter } from '@/router'

const getDefaultState = () => {
  return {
    token: getToken(),
    name: '',
    avatar: ''
  }
}

const state = getDefaultState()

const dd = {}


const mutations = {
  RESET_STATE: (state) => {
    Object.assign(state, getDefaultState())
  },
  SET_TOKEN: (state, token) => {
    state.token = token
  },
  SET_NAME: (state, name) => {
    state.name = name
  },
  SET_AVATAR: (state, avatar) => {
    state.avatar = avatar
  }
}

const actions = {





  // user login
  login({ commit }, userInfo) {
    const { username, password } = userInfo
    console.log('打印response 前');
    return new Promise((resolve, reject) => {
      login({ account: username.trim(), password: password }).then(response => {
        console.log('打印response',response);
        this.dd = response
        const  {result}  = response

        console.log('print data',result);
        commit('SET_TOKEN', result.token)
        setToken(result.token)
        console.log('token------------------');

        //设置头像和用户权限
        const name = response.result.bname
        const avatar = response.result.headUrl
        //
        this.state.name = name
        state.avatar = avatar

        console.log('记录state.name',this.state.name,state.avatar, name, avatar, response);


        resolve()
      }).catch(error => {
        'print catch error'.log
        reject(error)
      })
    })
  },


  // test
  login2() {
    console.log('this is a test ----------------->', this.dd);
    //设置头像和用户权限
    const name = this.dd.result.bname
    const avatar = this.dd.result.headUrl
    //
    state.name = name
    state.avatar = avatar
  },



  // get user info
  getInfo({ commit, state }) {
    console.log('is reached here');
    return new Promise((resolve, reject) => {
      getInfo(this.dd).then(response => {
        console.log('print getinfo response');
        // const { data } = response

        // if (!data) {
        //   return reject('Verification failed, please Login again.')
        // }
        //
        console.log('bname');
        const name = response.bname
        const avatar = response.headUrl
        //
        // commit('SET_NAME', name)
        // commit('SET_AVATAR', avatar)
        // console.log('have set avtar');
        // resolve(data) 注释后不往外传数据
      }).catch(error => {
        console.log('get info have error');
        reject(error)
      })
    })
  },

  // user logout
  logout({ commit, state }) {
    return new Promise((resolve, reject) => {
      logout(state.token).then(() => {
        removeToken() // must remove  token  first
        resetRouter()
        commit('RESET_STATE')
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },



  // remove token
  resetToken({ commit }) {
    return new Promise(resolve => {
      removeToken() // must remove  token  first
      commit('RESET_STATE')
      resolve()
    })
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}