Vue的vue-admin-template-master基础模板修改，后台连接数据库并且使用springsecurity安全框架-CSDN博客

本文链接：https://blog.csdn.net/xiaxiao520/article/details/121240622

1、配置跨域

1.找到vue.config.js
和 overlay同级下加跨域配置

proxy: {
      '/api':{
        target:"http://192.168.43.48:8087/",/*远程地址*/
        changeOrigin:true, /*允许跨域*/
        pathRewrite:{ /*将api替换""*/
          '^/api':""
        }
      }
    },
    
********************
2.注释下面代码
//before: require('./mock/mock-server.js')

2、如果想使用中文版的，找到main.js

注释英文版，开启中文版的即可
// set ElementUI lang to EN
//Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
Vue.use(ElementUI)

3、找到src下的store-->modules下面的user.js文件

1.在state里面多加个对象
const state = {
....
  authority:""
}
**********

2.在mutations里面设置权限
const mutations = {
.....
  SET_AUTHORITY: (state, authority)=>{ 
    state.authority= authority
  }
}
*************

3.在getInfo构造函数中添加以下代码
let authArr=[]
for (const Key in data.authorities) {  // in
     authArr.push(data.authorities[Key].authority) //获取token中的权限，并进行遍历赋值
}
****************

4、将以下的name都改为username
const { roles, username, avatar, introduction } = data
commit('SET_NAME', username)
****************

5.在其下方的commit中设置以下权限
commit('SET_AUTHORITY', authArr) //调用commit设置权限

4、点击最上方的login就可以直接进入src下api中的user.js中

1.然后找到login构造函数
把url中的配置换成自己的登录路径
如下
return request({
    url: '/api/admin/login', //自己路径
    method: 'post',
    data: QS.stringify(data)  //将request转换为formdata传递
  })
  
***************
2.找到下面的getInfo构造函数，进行以下修改
return request({
    url: '/api/admin/getinfo',  //注意点,路径要写对
    method: 'post',
    headers: {"Authorization":"Bearer"+token} //头部设置token
  })

5、设置权限get方法

1、在src-->store-->getters.js中添加以下信息
const getters = {
.....
    authority: state => state.user.authority
}

5、设置发送请求文件

在 src 下 utils下的request.js中配置以下信息

1、注释以下自带配置路径
const service = axios.create({
  // baseURL: process.env.VUE_APP_BASE_API,  // api 的 base_url
})

**************
2、在中将自定义的状态码注释，或者用自己配置的也行.然后直接返回res

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

      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        // 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
    }*/
    return res

}