SC——vue-element-admin，据自己接口登录及退出

参考文章：vue-element-admin登录流程修改(亲测有用)_mb607022e25a607的技术博客_51CTO博客

用户登录（中）_雪急飞绪的博客-CSDN博客 

一、根据自己接口的字段名修改用户名和密码，这里以userName为例，共三处修改

1、login-index.vue 

<el-form-item prop="username">
        <span class="svg-container">
          <svg-icon icon-class="user" />
        </span>
        <el-input
          ref="username"
          v-model="loginForm.userName"//改这里1
          :placeholder="$t('login.username')"
          name="username"
          type="text"
          tabindex="1"
          autocomplete="on"
        />
      </el-form-item>
loginForm: {
        userName: 'admin',//改这里2
        password: 'seeyonnet.com'
      },

2、src-store-modules-user.js

login({ commit }, userInfo) {
    const { userName, password } = userInfo
    return new Promise((resolve, reject) => {
      login({ userName: userName.trim(), password: password }).then(response => {//改这里3
         const { data } = response
         commit('SET_TOKEN', data.token)
         setToken(data.token)
        resolve()
      }).catch(error => {
				reject(error)
      })
    })
  }

二、调取自己的接口地址（含登录+获取用户信息+退出登录），src-api-user.js

export function login(data) {
  return request({
    // url: '/vue-element-admin/user/login',//原版
		url: '你自己的接口地址',
    method: 'post',//你自己的接口请求方式
    data
  })
}
//获取用户信息
export function getInfo(token) {
  return request({
    url: '你自己的接口地址',
    method: 'post',
  })
}
//退出登录
export function logout() {
  return request({
    url: '你自己的接口地址',
    method: 'post',
  })
}

三、存储token，src-store-modules-user.js

 // user login
  login({ commit }, userInfo) {
    const { userName, password } = userInfo
    return new Promise((resolve, reject) => {
      login({ userName: userName.trim(), password: password }).then(response => {
    const  token = response.info.accessToken
    commit('SET_TOKEN', token)
    setToken(token)
//下面三行是原版，具体这里怎么写需要根据你自己接口的返回数据确定
        // const { data } = response
        // commit('SET_TOKEN', data.token)
        // setToken(data.token)
        resolve()
      }).catch(error => {
        // reject(error)
				reject(error)
      })
    })
  }

四、返回成功状态码、src-utils-request.js

 config => {
    // do something before request is sent
// 如果存在 token 则附带在 http header 中
    if (store.getters.token) {
			config.headers['accessToken'] = getToken()//accessToken是根据你自己接口确定
    }
    return config
  } 

response => {
    const res = response.data
    // if the custom code is not 20000, it is judged as an error.
    if (res.code !== 100) {//只改这里，根据你自己接口返回成功状态码确定
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 8 * 1000
      })
// 判断 token 失效的场景，这里也是根据你自己接口返回成功状态码确定，这些数可以删掉换成你需要的
      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;1002:old
      if (res.code === 50008 || res.code === 50012 || res.code === 50014 || res.code === 1002) {
        // to re-login
				// 如果 token 失效，则弹出确认对话框，用户点击后，清空 token 并返回登录页面
        // MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
					MessageBox.confirm('您已经退出登录，您可以取消登录以留在此页面, 或者重新登录', '确认注销', {
          // confirmButtonText: 'Re-Login',
					confirmButtonText: '重新登录',
          // cancelButtonText: 'Cancel',
					cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        })
      }
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  }

五、关闭mock（根据参考文章整合）

1、去掉 main.js 中 mock 相关代码：

if (process.env.NODE_ENV === 'production') {
  const { mockXHR } = require('../mock')
  mockXHR()
}
// 或
import { mockXHR } from '../mock'
if (process.env.NODE_ENV === 'production') {
  mockXHR()
}

2、删除 src/api 目录下的 article.js 和 qiniu.js，如果不敢删可以把里面内容注释掉，我是注释的

3、修改 vue.config.js 中的相关配置：（这里有待商榷，可以先这样写。改完别忘了重启项目才生效）

proxy: {
  [process.env.VUE_APP_BASE_API]: {
    target: `你自己的地址`,
    changeOrigin: true,
    pathRewrite: {
      ['^' + process.env.VUE_APP_BASE_API]: ''
    }
  }
},
//如果出现下面这两行要注释掉
after: require('./mock/mock-server.js')
// 或
before: require('./mock/mock-server.js')
//我是这样写的目前，但是这种写法只能访问到本地，还是得写成上面那种形式
proxy:{
			'/api': {
			  target: '你自己的地址',// 要跨域的域名
			  changeOrigin: true, // 是否开启跨域
			  pathRewrite: {
			    '^/api': '/'
			  }
			}
		}

4、修改 .env.development 和 .env.production 两个配置文件，找到下面这行，把内容清空

VUE_APP_BASE_API = ''