文章介绍
开源资源连接
新建项目一个Web API项目：vue element admin
配置vue-element-admin
我的方法不是全局配置，没有配置以下文件
VUE_APP_BASE_API= '/dev-api'
devServer:{
'proxy':{
'/api':{
target: 'http://localhost:5172',changeOrigin:true}}},
我只修改了以下文件
import request from '@/utils/request'
exportfunctionlogin(data){returnrequest({
baseURL: 'http://localhost:5172/api/user',url: '/login',method: 'post',
data})}
exportfunctiongetInfo(token){returnrequest({
baseURL: 'http://localhost:5172/api/user',url: '/info',method: 'get',params:{ token}})}
exportfunctionlogout(){returnrequest({
baseURL: 'http://localhost:5172/api/user',url: '/logout',method: 'post'})}
import { login, logout, getInfo } from '@/api/user'
import { getToken, setToken, removeToken } from '@/utils/auth'
import router, { resetRouter } from '@/router'
const state = {
token: getToken(),
name: '',
avatar: '',
introduction: '',
roles: []
}
const mutations = {
SET_TOKEN: (state, token) => {
state.token = token
},
SET_INTRODUCTION: (state, introduction) => {
state.introduction = introduction
},
SET_NAME: (state, name) => {
state.name = name
},
SET_AVATAR: (state, avatar) => {
state.avatar = avatar
},
SET_ROLES: (state, roles) => {
state.roles = roles
}
}
const actions = {
// user login
login({ commit }, userInfo) {
const { username, password } = userInfo
return new Promise((resolve, reject) => {
login({ username: username.trim(), password: password }).then(data => {
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 { roles, name, avatar, introduction } = data
// 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(data)
}).catch(error => {
reject(error)
})
})
},
// user logout
logout({ commit, state, dispatch }) {
return new Promise((resolve, reject) => {
logout(state.token).then(() => {
commit('SET_TOKEN', '')
commit('SET_ROLES', [])
removeToken()
resetRouter()
// reset visited views and cached views
// to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2485
dispatch('tagsView/delAllViews', null, { root: true })
resolve()
}).catch(error => {
reject(error)
})
})
},
// remove token
resetToken({ commit }) {
return new Promise(resolve => {
commit('SET_TOKEN', '')
commit('SET_ROLES', [])
removeToken()
resolve()
})
},
// dynamically modify permissions
async changeRoles({ commit, dispatch }, role) {
const token = role + '-token'
commit('SET_TOKEN', token)
setToken(token)
const { roles } = await dispatch('getInfo')
resetRouter()
// generate accessible routes map based on roles
const accessRoutes = await dispatch('permission/generateRoutes', roles, { root: true })
// dynamically add accessible routes
router.addRoutes(accessRoutes)
// reset visited views and cached views
dispatch('tagsView/delAllViews', null, { root: true })
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
import axios from 'axios'
import { MessageBox, Message, Notification } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
// 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['Authorization'] = 'Bearer ' + getToken()
}
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)
// response interceptor
service.interceptors.response.use(
/**
* If you want to get http information such as headers or status
* Please return response => response
*/
/**
* Determine the request status by custom code
* Here is just an example
* You can also judge the status by HTTP Status Code
*/
response => {
const res = response.data
const statusCode = response.status
// if the custom code is not 20000, it is judged as an error.
if (statusCode !== 200) {
Message({
message: res.message || 'Error',
type: 'error',
duration: 5 * 1000
})
return Promise.reject(new Error(res.message || 'Error'))
} else {
return res
}
},
error => {
if (!error.response) {
return
}
// 对错误进行自定义展示
const statusCode = error.response.status
const res = error.response.data
if (statusCode === 401) {
// to re-login
MessageBox.confirm('登陆已经失效', '确认', {
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
store.dispatch('user/resetToken').then(() => {
location.reload()
})
})
} else if (statusCode === 406) {
Message.error('账号或者密码错误')
} else if (statusCode === 422) {
// 表单验证失败之类的错误提示,给出具体错误，可由用户手动关闭，因为有时候错误信息我们需要复制
const errDetail = Object.values(res.errors)
Notification({
title: '错误通知',
dangerouslyUseHTMLString: true,
duration: 0,
message: `<div>${res.message}</div><div>错误详情</div><div>${errDetail}</div>
`,
type: 'error'
})
} else if (statusCode === 403) {
Notification({
title: '警告',
dangerouslyUseHTMLString: true,
duration: 0,
message: `<div>${res.message}</div>
`,
type: 'warning'
})
} else if (statusCode === 404) {
// 未找到资源
Message({
message: res.message || 'Error',
type: 'error',
duration: 3 * 1000
})
} else {
Message({
message: res.message || 'Error',
type: 'error',
duration: 5 * 1000
})
}
return Promise.reject(error)
}
)
export default service