登录业务流程修改,token过期处理
Showing
4 changed files
with
83 additions
and
83 deletions
... | @@ -7,7 +7,7 @@ export function loginIn(username, password) { | ... | @@ -7,7 +7,7 @@ export function loginIn(username, password) { |
7 | method: "post", | 7 | method: "post", |
8 | }); | 8 | }); |
9 | } | 9 | } |
10 | export function loginOut() { | 10 | export function logout() { |
11 | return request({ | 11 | return request({ |
12 | url: `${SERVER.MANAGEMENTAPI}/logout`, | 12 | url: `${SERVER.MANAGEMENTAPI}/logout`, |
13 | method: "post", | 13 | method: "post", | ... | ... |
... | @@ -22,7 +22,7 @@ | ... | @@ -22,7 +22,7 @@ |
22 | <script> | 22 | <script> |
23 | import sidebarLeft from "./Sidebar/sidebarLeft"; | 23 | import sidebarLeft from "./Sidebar/sidebarLeft"; |
24 | import sidebarRight from "./Sidebar/sidebarRight"; | 24 | import sidebarRight from "./Sidebar/sidebarRight"; |
25 | import { loginOut } from "@/api/login.js"; | 25 | import { logout } from "@/api/login.js"; |
26 | import { mapGetters } from "vuex"; | 26 | import { mapGetters } from "vuex"; |
27 | export default { | 27 | export default { |
28 | components: { | 28 | components: { |
... | @@ -34,10 +34,15 @@ export default { | ... | @@ -34,10 +34,15 @@ export default { |
34 | }, | 34 | }, |
35 | methods: { | 35 | methods: { |
36 | onCancel() { | 36 | onCancel() { |
37 | loginOut() | 37 | logout() |
38 | .then((res) => { | 38 | .then((res) => { |
39 | sessionStorage.removeItem("token"); | 39 | sessionStorage.removeItem("token"); |
40 | this.$router.push("/login"); | 40 | this.$router.replace({ |
41 | path: "/login", | ||
42 | query: { | ||
43 | redirect: this.$route.fullPath, | ||
44 | }, | ||
45 | }); | ||
41 | }) | 46 | }) |
42 | .catch((error) => { | 47 | .catch((error) => { |
43 | // console.dir(error); | 48 | // console.dir(error); | ... | ... |
1 | /** | 1 | /** |
2 | * 此文件主要创建 axios 实例,然后添加请求拦截器和响应拦截器 | 2 | * 此文件主要创建 axios 实例,然后添加请求拦截器和响应拦截器 |
3 | */ | 3 | */ |
4 | import axios from 'axios' | 4 | import axios from "axios"; |
5 | import { Message } from 'element-ui' | 5 | import { Message } from "element-ui"; |
6 | import { endLoadingSubCount } from './requestLoading' | 6 | import { endLoadingSubCount } from "./requestLoading"; |
7 | import router from "../router"; | ||
7 | 8 | ||
8 | // create an axios instance | 9 | // create an axios instance |
9 | const service = axios.create({ | 10 | const service = axios.create({ |
10 | baseURL: process.env.VUE_APP_BASE_API, | 11 | baseURL: process.env.VUE_APP_BASE_API, |
11 | withCredentials: true, //是否允许跨域 | 12 | withCredentials: true, //是否允许跨域 |
12 | headers: { | 13 | headers: { |
13 | 'Content-Type': 'application/json; charset=utf-8' | 14 | "Content-Type": "application/json; charset=utf-8", |
14 | }, | 15 | }, |
15 | timeout: 15000 | 16 | timeout: 15000, |
16 | }) | 17 | }); |
17 | 18 | ||
18 | // request interceptor | 19 | // request interceptor |
19 | service.interceptors.request.use( | 20 | service.interceptors.request.use( |
20 | config => { | 21 | (config) => { |
21 | //调用登录接口时无token,也不需要传token,其他接口都传入token | 22 | //调用登录接口时无token,也不需要传token,其他接口都传入token |
22 | config.headers.Authorization = sessionStorage.getItem("token") || ""; | 23 | config.headers.Authorization = sessionStorage.getItem("token") || ""; |
23 | config.headers.Accept = 'application/json' | 24 | config.headers.Accept = "application/json"; |
24 | return config | 25 | return config; |
25 | }, | 26 | }, |
26 | error => { | 27 | (error) => { |
27 | Message.error('请求超时!'); | 28 | Message.error("请求超时!"); |
28 | return Promise.reject(error) | 29 | return Promise.reject(error); |
29 | } | 30 | } |
30 | ) | 31 | ); |
31 | 32 | ||
32 | // response interceptor | 33 | // response interceptor |
33 | service.interceptors.response.use( | 34 | service.interceptors.response.use( |
34 | response => { | 35 | (response) => { |
35 | /** | 36 | /** |
36 | * 对响应数据判断: | 37 | * 对响应数据判断: |
37 | * 如果成功返回数据,就通过return把数据返出去 | 38 | * 如果成功返回数据,就通过return把数据返出去 |
38 | * 如果请求不成功,就在拦截器这里统一处理(组件的代码就不用关注错误的情况了) | 39 | * 如果请求不成功,就在拦截器这里统一处理(组件的代码就不用关注错误的情况了) |
39 | */ | 40 | */ |
40 | if (response.status == 200) { | 41 | if (response.status == 200) { |
41 | // if (response.data.code == 500) { | 42 | return response.data; |
42 | // Message({ | ||
43 | // message: response.data.message, | ||
44 | // type: 'error', | ||
45 | // duration: 5 * 1000 | ||
46 | // }) | ||
47 | // } | ||
48 | return response.data; | ||
49 | } else { | ||
50 | handleErrorData(response.data); | ||
51 | } | ||
52 | return response; | ||
53 | }, | ||
54 | error => { | ||
55 | endLoadingSubCount() | ||
56 | // 对响应错误做点什么 | ||
57 | Message({ | ||
58 | message: '服务器异常,请联系管理员', | ||
59 | type: 'error', | ||
60 | duration: 5 * 1000 | ||
61 | }) | ||
62 | return Promise.reject(error); | ||
63 | } | ||
64 | ) | ||
65 | //对错误信息的处理函数 | ||
66 | function handleErrorData (errMes) { | ||
67 | if (errMes.message) { | ||
68 | Message.error(errMes.message); | ||
69 | } else { | 43 | } else { |
70 | switch (errMes.code) { | 44 | // 对响应错误做点什么 |
71 | case 401: | 45 | Message({ |
72 | Message.error("由于长时间未操作,请重新登录!"); | 46 | message: "请求失败", |
73 | window.location.href = `http://${window.location.host}` | 47 | type: "error", |
74 | break; | 48 | duration: 5 * 1000, |
75 | case 403: | 49 | }); |
76 | Message.error("拒绝访问"); | ||
77 | break; | ||
78 | case 404: | ||
79 | Message.error("很抱歉,资源未找到!"); | ||
80 | break; | ||
81 | case 500: | ||
82 | Message.error("服务器错误!"); | ||
83 | break; | ||
84 | default: | ||
85 | Message.error("服务正在联调中,请稍后!"); | ||
86 | break; | ||
87 | } | ||
88 | } | 50 | } |
51 | return response; | ||
52 | }, | ||
53 | (error) => { | ||
54 | handleErrorData(error.response.status); | ||
55 | endLoadingSubCount(); | ||
56 | return Promise.reject(error); | ||
57 | } | ||
58 | ); | ||
59 | //对错误信息的处理函数 | ||
60 | function handleErrorData(status) { | ||
61 | switch (status) { | ||
62 | case 401: | ||
63 | Message.error("由于长时间未操作,请重新登录!"); | ||
64 | router.replace({ | ||
65 | path: "/login", | ||
66 | query: { | ||
67 | redirect: router.history.current.fullPath, | ||
68 | }, | ||
69 | }); | ||
70 | break; | ||
71 | case 403: | ||
72 | Message.error("拒绝访问"); | ||
73 | break; | ||
74 | case 404: | ||
75 | Message.error("很抱歉,资源未找到!"); | ||
76 | break; | ||
77 | case 500: | ||
78 | Message.error("服务器错误!"); | ||
79 | break; | ||
80 | default: | ||
81 | Message.error("服务正在联调中,请稍后!"); | ||
82 | break; | ||
83 | } | ||
89 | } | 84 | } |
90 | export default service | 85 | export default service; |
91 | |||
92 | ... | ... |
... | @@ -79,10 +79,12 @@ export default { | ... | @@ -79,10 +79,12 @@ export default { |
79 | loginIn(self.user.account, self.user.password) | 79 | loginIn(self.user.account, self.user.password) |
80 | .then((res) => { | 80 | .then((res) => { |
81 | if (res.status === 1) { | 81 | if (res.status === 1) { |
82 | //存储token | ||
82 | sessionStorage.setItem("token", `Bearer ${res.content}`); | 83 | sessionStorage.setItem("token", `Bearer ${res.content}`); |
83 | this.$router.push('/'); | 84 | //路由判断有无 |
85 | this.$router.replace(this.$route.query.redirect || '/') | ||
84 | } else { | 86 | } else { |
85 | alert(res.message); | 87 | //错误处理 |
86 | } | 88 | } |
87 | }) | 89 | }) |
88 | .catch((error) => { | 90 | .catch((error) => { | ... | ... |
-
Please register or sign in to post a comment