0b495ea8 by yangwei

登录业务流程修改,token过期处理

1 parent 40f23ca0
...@@ -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) => {
......