Browse Source

增加了API和Store状态

vue
adiao 3 years ago
parent
commit
ded33b2572
  1. 13
      src/utils/axios/interceptors/request.js
  2. 24
      src/utils/axios/interceptors/response.js
  3. 2
      src/utils/axios/util/api.js
  4. 43
      src/utils/axios/util/http.js
  5. 0
      src/utils/pasretTokenUtil.js
  6. 5
      src/utils/vuex/index.js
  7. 35
      src/utils/vuex/modules/user.js
  8. 13
      src/views/Login2.vue

13
src/utils/axios/interceptors/request.js

@ -0,0 +1,13 @@ @@ -0,0 +1,13 @@
import axios from "axios"
// 请求拦截器
axios.interceptors.request.use(
config => {
// 每次发送请求之前判断是否存在token
// 如果存在,则统一在http请求的header都加上token,这样后台根据token判断你的登录情况,此处token一般是用户完成登录后储存到localstorage里的
token && (config.headers.Authorization = token)
return config
},
error => {
return Promise.error(error)
}
)

24
src/utils/axios/interceptors/response.js

@ -0,0 +1,24 @@ @@ -0,0 +1,24 @@
import axios from "axios"
// 响应拦截器
axios.interceptors.response.use(response => {
// 如果返回的状态码为200,说明接口请求成功,可以正常拿到数据
// 否则的话抛出错误
if (response.status === 200) {
if (response.data.code === 511) {
// 未授权调取授权接口
} else if (response.data.code === 510) {
// 未登录跳转登录页
} else {
return Promise.resolve(response)
}
} else {
return Promise.reject(response)
}
}, error => {
// 我们可以在这里对异常状态作统一处理
if (error.response.status) {
// 处理请求失败的情况
// 对不同返回码对相应处理
return Promise.reject(error.response)
}
})

2
src/utils/axios/util/api.js

@ -0,0 +1,2 @@ @@ -0,0 +1,2 @@
import { httpGet, httpPost } from './http'
export const getorglist = (params = {}) => httpGet({ url: 'apps/api/org/list', params })

43
src/utils/axios/util/http.js

@ -0,0 +1,43 @@ @@ -0,0 +1,43 @@
export function httpGet({
url,
params = {}
}) {
return new Promise((resolve, reject) => {
axios.get(url, {
params
}).then((res) => {
resolve(res.data)
}).catch(err => {
reject(err)
})
})
}
// post
// post请求
export function httpPost({
url,
data = {},
params = {}
}) {
return new Promise((resolve, reject) => {
axios({
url,
method: 'post',
transformRequest: [function (data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
// 发送的数据
data,
// url参数
params
}).then(res => {
resolve(res.data)
})
})
}

0
src/utils/pasretTokenUtil.js

5
src/utils/vuex/index.js

@ -0,0 +1,5 @@ @@ -0,0 +1,5 @@
import { createStore } from 'vuex'
export default createStore({
modules
})

35
src/utils/vuex/modules/user.js

@ -0,0 +1,35 @@ @@ -0,0 +1,35 @@
export default {
store: {
username: '',
token: '',
image: '',
path: ''
},
mutations: {
},
actions: {
},
getName: {
get(state) {
return username = store.username
}
},
getToken: {
get(state) {
return token = store.token
}
},
getPath: {
get(state) {
return path = store.path
}
},
getImage: {
get(state) {
return image = store.image
}
}
}

13
src/views/Login2.vue

@ -0,0 +1,13 @@ @@ -0,0 +1,13 @@
<template>
<div>
login2
</div>
</template>
<script setup>
import { ref, reactive } from 'vue';
// setup(props, context) setup
///
// reactive Ref
</script>
Loading…
Cancel
Save