vue-element-admin使用原创

# 一. 移除mock

# 1.vue.config.js删除before: require('./mock/mock-server.js')

module.exports = {
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,
  devServer: {
    port: port,
    overlay: {
      warnings: false,
      errors: true
    }
    before: require('./mock/mock-server.js') //删除
  },

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 2. 删除main.js如下代码

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

1
2
3
4

# 3. 修改api的接口为后端真实接口

// api/user.js
export function login(data) {
  return request({
    url: '/api/user/login',
    method: 'post',
    data
  })
}

export function getInfo(token) {
  return request({
    url: '/api/user/getInfo',
    method: 'get',
    params: { token }
  })
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 4.修改axios的baseURL为后端地址

// .env.development
VUE_APP_BASE_API = 'http://localhost:8101/'

1
2

# 5. 修改封装axios的request请求

// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

//axios响应拦截器
 if (res.code !== 0) {
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })

      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
      if (res.code === 40100) {
        // to re-login
        MessageBox.confirm('登录超时', 'Confirm logout', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        })
      }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# 6. 修改 /store/modules/user的请求,将请求字段跟后端一致

  // user login
  login({ commit }, userInfo) {
    const { userAccount, userPassword } = userInfo
    return new Promise((resolve, reject) => {
      login({ userAccount: userAccount.trim(), userPassword: userPassword }).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) {
          reject('Verification failed, please Login again.')
        }

        const { userRole, userName, userAvatar, userProfile } = data

        // roles must be a non-empty array
        if (!userRole || userRole.length <= 0) {
          reject('getInfo: roles must be a non-null array!')
        }

        commit('SET_ROLES', userRole)
        commit('SET_NAME', userName)
        commit('SET_AVATAR', userAvatar)
        commit('SET_INTRODUCTION', userProfile)
        resolve(data)
      }).catch(error => {
        reject(error)
      })
    })
  },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

# 7. 修改store/getter字段与后端一致

 userAvatar: state => state.user.userAvatar,
  userName: state => state.user.userName,
  userProfile: state => state.user.userProfile,
  userRole: state => state.user.userRole,

1
2
3
4

# 8. 修改permission如下两处

 if (hasToken) {
    if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done()
    } else {
      const hasRoles = store.getters.userRole && store.getters.userRole.length > 0
      if (hasRoles) {
        next()
      } else {
        try {
           //将原本的roles改成userRole，跟后端一致
          const { userRole } = await store.dispatch('user/getInfo')

          const accessRoutes = await store.dispatch('permission/generateRoutes', userRole)

          router.addRoutes(accessRoutes)
          next({ ...to, replace: true })
        } catch (error) {
          await store.dispatch('user/resetToken')
            // 将error改成error.message
          Message.error(error.message || 'Has Error')
          next(`/login?redirect=${to.path}`)
          NProgress.done()
        }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 9. 修改login/index.vue

9.1 将账号密码请求字段与对应输入框ref字段改成userAccount，userPassword

 loginForm: {
        userAccount: '',
        userPassword: ''
      },
      loginRules: {
        userAccount: [{ required: true, trigger: 'blur', validator: validateUsername }],
        userPassword: [{ required: true, trigger: 'blur', validator: validatePassword }]
      },

1
2
3
4
5
6
7
8

9.2 去掉mock数据!validUsername(value)的使用

 const validateUsername = (rule, value, callback) => {
    // 将!validUsername(value)改成value.length < 4
      if (value.length < 4) {
        callback(new Error('用户名不少于4位'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码不少于4位'))
      } else {
        callback()
      }
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#前端

上次更新: 2024/01/14 16:27:31

← 调试 Vue 源码 el-upload封装→