vue-element-admin新版v4.0的登录改造步骤及零星问题解决

vue-admin-template官方网站为 https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/ ，新版本为v4.0，其 store->modules->user.js 的登录与验证方法都与老版本不同，故登录改造时遇到了一些麻烦，以下为我对 vue-admin-template 进行登录改造的过程和其中一些问题的解决办法，亲测有效。

一、登录改造

前置工作：下载并解压vue-element-admin-master到项目工作区，npm install 下载安装依赖。

第一步，修改根目录下的 .env.development

# just a flag
ENV = 'development'

# base api
# VUE_APP_BASE_API = '/dev-api'
VUE_APP_BASE_API = 'http://localhost:8201/'
    
port = 8501

VUE_APP_BASE_API 即老版本的 baseUrl，填写我们自己项目的后端接口地址，port 指明的是我们项目前端的端口地址。

第二步，在后端新建 controller 来响应前端登录请求

第一步中我们把 BASE_API 改成了我们自己项目的后端，故登录请求现在会发往我们项目的后端，我们应该进行编写代码来响应这个请求，但这个代码的编写是非常简单的。

根据 api->user.js 提供的 url 和 method请求方法，我们可以知道如何编写 controller 的 @PostMapping与@GetMapping，

import request from '@/utils/request'

export function login(data) {
  return request({
    url: '/vue-admin-template/user/login',
    method: 'post',
    data
  })
}

export function getInfo(token) {
  return request({
    url: '/vue-admin-template/user/info',
    method: 'get',
    params: { token }
  })
}

export function logout() {
  return request({
    url: '/vue-admin-template/user/logout',
    method: 'post'
  })
}

根据 store->modules->user.js，我们可以知道我们创建的 controller 该返回什么样的数据。

const actions = {
  // 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)
      })
    })
  },

  // get user info
  getInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      getInfo(state.token).then(response => {
        const { data } = response

        if (!data) {
          return reject('Verification failed, please Login again.')
        }

        const { name, avatar } = data

        commit('SET_NAME', name)
        commit('SET_AVATAR', avatar)
        resolve(data)
      }).catch(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()
    })
  }
}

创建Controller。（如果前面两段代码你跟我一样，即是官网最新版本的v4.0，可以不看，直接粘入以下代码。）

/**
 * Parker
 **/

@RestController
@RequestMapping("/vue-admin-template/user")
public class MockLoginController {

    @PostMapping("login")
    public Result login() {
        Map<String,Object> map = new HashMap<>();
        map.put("token","admin");
        return Result.ok(map);
    }

    @GetMapping("info")
    public Result getinfo() {
        Map<String,Object> map = new HashMap<>();
        map.put("name","admin");
        map.put("avatar","https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");
        return Result.ok(map);
    }

    @PostMapping("logout")
    public Result logout(){
        return Result.ok();
    }
}

此时前端将成功接收到后端返回的json数据，得到token，放行我们登录。

二、零星问题解决

1. 跨域问题

如果你碰到如下错误，那么就是发生了跨域问题。

<url> has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

这里提供2种解决办法，亲测有效。

第一种大家基本都知道，就是在 controller 类上加 @CrossOrigin 注解。

第二种是我要重点介绍的，创建一个 config 类来配置跨域，代码非常简单，只需修改一个地方，如下。

/**
 * 配置跨域
 **/
@SpringBootConfiguration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry corsRegistry){
        /**
         * 所有请求都允许跨域
         */
        corsRegistry.addMapping("/**")
                .allowCredentials(true)
                .allowedOrigins("http://localhost:9535") //这里改成自己项目前端的端口号
                .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
                .allowedHeaders("*")
                .maxAge(3600);
    }

}

2.注释掉在线mock数据获取

生产环境使用的是在线mock数据获取，我们需要注释掉两处内容，即可关闭。

第一，注释 main.js 的如下代码。

//登录改造注释处1
// if (process.env.NODE_ENV === 'production') {
//   const { mockXHR } = require('../mock')
//   mockXHR()
// }

第二，注释 vue.config.js 的如下代码。

// 登录改造2
// before: require('./mock/mock-server.js')

3.前端端口的自增

有时候 vue 项目每次启动端口都会增加1 ，导致我们第一步配置的用来实现跨域的 config 中的端口号错误，除了重新修改 config 中的端口号。

这是因为端口号被占用了，我们启动服务器也要养成关闭的习惯，我们可以打开任务管理器手动关闭 node 任务，也可以在终端 ctrl + c 来关闭。

4.关闭eslint检查

eslint 会审查代码是否符合编码规范和统一的代码风格，也就是我们编写代码即使语法没有错，但是多一个空格少一个空格时，会报错。这是因为违反了 eslint的编码规范，我们直接关闭这种检查即可。

打开根目录下的 .eslintrc.js，找到 rules 结点，进行如下修改：

rules: {
    "vue/max-attributes-per-line": [2, {
      "singleline": 10,
      "multiline": {
        "max": 1,
        "allowFirstLine": false  //修改这里来关闭
      }

5.vue中请求url会自动带上本地ip

f12打开 login 请求时会出现 url 中带有2个localhost，如：
Request URL: http://localhost:8205/localhost:8201/vue-admin-template/user/login

这是因为根目录下 .env.development 中的 VUE_APP_BASE_API 没有书写规范。

这里给出两个常见错误：第一检查有没有加上 http:// ，没有就加上。第二检查 VUE_APP_BASE_API 前后是否有空格，后面容易多出空格，也会引起错误。

6.响应成功code

默认响应成功的 code 是 20000 ，我们需要在 request.js 中修改成 200 ，如下代码：

if (res.code !== 200) {
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })