springboot+vue-element-ui构建后台管理踩坑记录（1）登录

最新推荐文章于 2023-03-16 09:22:22 发布

php-python-java-go-c

最新推荐文章于 2023-03-16 09:22:22 发布

阅读量233

点赞数

本文链接：https://blog.csdn.net/qq_28085257/article/details/120201477

版权

java 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

vue

1 篇文章 0 订阅

订阅专栏

本文详细介绍了在前后端交互中遇到的常见问题及其解决方案，包括控制器中启用跨域支持的@CrossOrigin注解，request.js中引入qs库以正确传递参数，修改响应处理以适配接口返回，以及在用户模块中更新token获取和用户信息获取的方法。这些调整有助于提升应用的稳定性和用户体验。

摘要由CSDN通过智能技术生成

1.不允许跨域，解决方法在controller中注解

@CrossOrigin

2.后台接收不到参数，解决方法在request.js中引入qs,并config.data = Qs.stringify(config.data)

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
import Qs from 'qs'

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

// request interceptor
service.interceptors.request.use(
  config => {
    // do something before request is sent
    if (store.getters.token) {
      // let each request carry token
      // ['X-Token'] is a custom headers key
      // please modify it according to the actual situation
      config.headers['X-Token'] = getToken()
    }
    config.data = Qs.stringify(config.data)
    return config
  },

3.修改response对应参数(request.js)，修改与接口对应上

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

      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
      if (res.status === -1) {
        // to re-login
        MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
          confirmButtonText: 'Re-Login',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(() => {
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        })
      }
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },

4.修改token获取的字段（\src\store\modules\user.js）

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.loginToken)
        setToken(data.loginToken)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

5.修改获取用户信息路径同上

  getInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      getInfo(state.token).then(response => {
        const { data } = response
        console.log(data)
        if (!data || response.status !== 1) {
          reject('Verification failed, please Login again.')
        }

        // eslint-disable-next-line prefer-const
        // const { roles, name, avatar, introduction } = data
        // eslint-disable-next-line prefer-const
        let { authIds, userName, avatar } = data
        if (userName === 'admin') {
          authIds = ['admin']
        }
        const roles = authIds
        const name = userName
        const introduction = userName
        const data1 = { roles, name, avatar, introduction }
        // roles must be a non-empty array
        if (!roles || roles.length <= 0) {
          reject('getInfo: roles must be a non-null array!')
        }

        commit('SET_ROLES', roles)
        commit('SET_NAME', name)
        commit('SET_AVATAR', avatar)
        commit('SET_INTRODUCTION', introduction)
        resolve(data1)
      }).catch(error => {
        reject(error)
      })
    })
  },