Vue-Element-Admin的项目集成自己的接口，登录跳转

1.先看一下请求配置文件，看axios.create这个方法，baseURL是基础路由

baseURL: process.env.VUE_APP_BASE_API,

路径：src-utils-request.js

2.然后再看service.interceptors.request.use，设置token请求头，我后端集成的是jwt，所以请求头是Authentication，如图

config.headers['X-Token'] = getToken()

3.设置自己的状态码，看service.interceptors.response.use，如图，设置为自己的状态码

状态码不等于1的直接拦截，弹出提示，根据自己的接口进行定义

这是我服务器响应的数据，如下，1是正常响应数据

{
    "code":1,
    "data":{
    "token":"de526cef7441c596bdb82af919d41665bc090bb1",
    "msg":"登录成功",
    "state":"true"
    }
}

4.改.env.production和.env.development里面的api

5.改基础路由配置，在devServer后面添加如下代码（before这行注释掉，这个用来模拟数据的，用不到），如图

// before: require('./mock/mock-server.js')
proxy: { // 配置反向代理
	[process.env.VUE_APP_BASE_API]: { // "/api"自定义的请求路径地址
		target: '请求的域名',
		changeOrigin: true, // 是否进行跨域 ture是  false不是
		pathRewrite: { // 路径重写
			['^' + process.env.VUE_APP_BASE_API]: '/'
		},
	}
},

6.在src-view-login-index.html文件中，找到Vue-Element-Admin的登录接口，添加如下代码，如图，把官方的请求方式注释掉，this.loginForm是请求参数

this.loading = true
	// 3.调用登录
this.$store.dispatch('user/login', this.loginForm)
.then(() => {
this.$router.push({path: this.required || '/',query: this.otherQuery,})this.$message.success('登录成功');
this.losding = false})
.catch(() => {this.loading = false})

7.设置用户登录成功后的跳转，登录后必须把token做缓存，不然登录页跳转不了

在src-store-moduls-use.js 找到action下的login方法，修改代码如下

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

8.找到getInfo方法，因为获取用户信息接口没写，所以数据直接写死，根据自己的做调整

 // getInfo(state.token).then(response => {
 // const { data } = response
const data = {
roles: ['admin'],
introduction:'admin',
"avatar:'',
name: 'admin',
}

这样就搞定了[Vue-Element-Admin]可以登录到首页了