# 克隆项目 git clone https://github.com/PanJiaChen/vue-admin-template.git # 进入项目目录 cd vue-admin-template # 安装依赖 npm install # 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题 npm install --registry=https://registry.npm.taobao.org # 启动服务 npm run dev
配置自己的接口
首先全局配置自己的接口
登录
修改自己的登录接口路径
修改自己的登录账号密码 可以先注释验证规则
修改接口状态码
request.js
已经对axios进行了二次封装
配置token
get post 封装
import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
import router from '@/router'
import { getToken } from '@/utils/auth'
import qs from 'querystring'
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 10000
})
service.interceptors.request.use(
config => {
if (store.getters.token) {
config.headers['Authorization'] = getToken()
}
return config
},
error => {
console.log(error)
return Promise.reject(error)
}
)
service.interceptors.response.use(
response => {
const res = response.data
if (res.status !== 200) {
if (res.status === 500) {
Message({ message: res.message, type: 'error', duration: 5 * 1000 })
}
if (res.status === 401) {
logout()
}
return Promise.reject(new Error(res.message || 'Error'))
} else {
return res
}
},
error => {
console.log('err' + error)
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export function get(url, params) {
return service.get(url, {
params,
timeout: 10000,
headers: {
'X-Requested-With': 'XMLHttpRequest'
}
})
}
export function del(url, params) {
return service.delete(url, {
params,
timeout: 10000,
headers: {
'X-Requested-With': 'XMLHttpRequest'
}
})
}
export function post(url, data) {
return service.post(url, qs.stringify(data), {
timeout: 10000,
headers: {
'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}
})
}
async function logout() {
await store.dispatch('user/logout')
router.push(`/login`)
}
export default service
