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
      })