朱兆平 / vue_cli · 提交

转到一个项目

作者 朱兆平
提交 a07d0defad0714fbf1d68335084e9efbea11ba44 1 个父辈 eb45da8b

http部分request携带登录后得到的TOKEN与后端交互

内嵌 并排对比
正在显示 4 个修改的文件 包含 33 行增加 和 20 行删除
@@ -2,7 +2,7 @@ import axios from 'axios' @@ -2,7 +2,7 @@ import axios from 'axios'
2 import qs from 'qs' 2 import qs from 'qs'
3 3
4 4
5 -axios.defaults.baseURL = 'http://localhost:8082/api'; 5 +axios.defaults.baseURL = '/api';
6 6
7 7
8 8
@@ -55,7 +55,7 @@ export default { @@ -55,7 +55,7 @@ export default {
55 data: qs.stringify(data), // post 请求的数据 55 data: qs.stringify(data), // post 请求的数据
56 timeout: 30000, // 超时时间, 单位毫秒 56 timeout: 30000, // 超时时间, 单位毫秒
57 headers: { 57 headers: {
58 - 'Content-Type': 'application/x-www-form-urlencoded', 58 + 'Content-Type': 'application/x-www-form-urlencoded'
59 } 59 }
60 }) 60 })
61 } 61 }
@@ -12,7 +12,7 @@ import axios from 'axios' @@ -12,7 +12,7 @@ import axios from 'axios'
12 //import 'nprogress/nprogress.css' 12 //import 'nprogress/nprogress.css'
13 import rout from './routes' 13 import rout from './routes'
14 import Mock from './mock' 14 import Mock from './mock'
15 - 15 +import 'font-awesome/css/font-awesome.min.css'
16 16
17 //定义一个全局过滤器实现日期格式化 17 //定义一个全局过滤器实现日期格式化
18 Vue.filter('datefmt',function(input,fmtstring){ 18 Vue.filter('datefmt',function(input,fmtstring){
@@ -23,12 +23,12 @@ Vue.filter('datefmt',function(input,fmtstring){ @@ -23,12 +23,12 @@ Vue.filter('datefmt',function(input,fmtstring){
23 23
24 24
25 25
  26 +Vue.config.productionTip = false
26 Mock.bootstrap(); 27 Mock.bootstrap();
27 -import 'font-awesome/css/font-awesome.min.css'  
28 -  
29 Vue.use(ElementUI) 28 Vue.use(ElementUI)
30 Vue.use(VueRouter) 29 Vue.use(VueRouter)
31 Vue.use(Vuex) 30 Vue.use(Vuex)
  31 +Vue.prototype.$axios = axios;
32 32
33 //NProgress.configure({ showSpinner: false }); 33 //NProgress.configure({ showSpinner: false });
34 console.log("mainjs:"); 34 console.log("mainjs:");
@@ -36,6 +36,7 @@ console.log(rout.routes); @@ -36,6 +36,7 @@ console.log(rout.routes);
36 const router = new VueRouter({ 36 const router = new VueRouter({
37 routes:rout.routes 37 routes:rout.routes
38 }); 38 });
  39 +Vue.prototype.$rout =router;
39 40
40 //本地存储系统初始化的router路由,用来处理用户退出后,把路由数据初始化 41 //本地存储系统初始化的router路由,用来处理用户退出后,把路由数据初始化
41 sessionStorage.setItem('sysMenu', JSON.stringify(rout.routes)); 42 sessionStorage.setItem('sysMenu', JSON.stringify(rout.routes));
@@ -45,9 +46,12 @@ router.beforeEach((to, from, next) => { @@ -45,9 +46,12 @@ router.beforeEach((to, from, next) => {
45 if (to.path == '/login') { 46 if (to.path == '/login') {
46 sessionStorage.removeItem('user'); 47 sessionStorage.removeItem('user');
47 sessionStorage.removeItem('menu'); 48 sessionStorage.removeItem('menu');
48 - sessionStorage.removeItem('token'); 49 + sessionStorage.removeItem('token');
49 } 50 }
50 let user = JSON.parse(sessionStorage.getItem('user')); 51 let user = JSON.parse(sessionStorage.getItem('user'));
  52 + if(sessionStorage.getItem('token')){
  53 + axios.defaults.headers.common['Authorization'] = sessionStorage.getItem('token');
  54 + }
51 if (!user && to.path != '/login' && !sessionStorage.getItem('menu') && !sessionStorage.getItem('token')) { 55 if (!user && to.path != '/login' && !sessionStorage.getItem('menu') && !sessionStorage.getItem('token')) {
52 next({ path: '/login' }) 56 next({ path: '/login' })
53 } else { 57 } else {
@@ -57,12 +61,19 @@ router.beforeEach((to, from, next) => { @@ -57,12 +61,19 @@ router.beforeEach((to, from, next) => {
57 61
58 axios.interceptors.response.use( 62 axios.interceptors.response.use(
59 res => { 63 res => {
  64 + //调用ELEMETN的message组件
  65 + let msg= Vue.prototype.$message;
  66 + //调用route组件
  67 + let route = Vue.prototype.$rout;
  68 + route.push({
  69 + path: "/main"
  70 + });
60 //对响应数据做些事 71 //对响应数据做些事
61 if (res.data && res.status!==200) { 72 if (res.data && res.status!==200) {
62 - this.$message({ 73 + msg({
63 // 饿了么的消息弹窗组件,类似toast 74 // 饿了么的消息弹窗组件,类似toast
64 showClose: true, 75 showClose: true,
65 - message: res.data.error.message.message ? res.data.error.message.message : res.data.error.message, 76 + message: 'res.data.error.message.message ? res.data.error.message.message : res.data.error.message',
66 type: "error" 77 type: "error"
67 }); 78 });
68 return Promise.reject(res.data.error.message); 79 return Promise.reject(res.data.error.message);
@@ -81,9 +92,15 @@ axios.interceptors.response.use( @@ -81,9 +92,15 @@ axios.interceptors.response.use(
81 92
82 // 下面是接口回调的satus ,因为我做了一些错误页面,所以都会指向对应的报错页面 93 // 下面是接口回调的satus ,因为我做了一些错误页面,所以都会指向对应的报错页面
83 if (error.response.status === 401) { 94 if (error.response.status === 401) {
84 - router.push({  
85 - path: "/login" 95 + Vue.prototype.$message({
  96 + // 饿了么的消息弹窗组件,类似toast
  97 + showClose: true,
  98 + message: '未授权，请登录',
  99 + type: "error"
86 }); 100 });
  101 + // router.push({
  102 + // path: "/login"
  103 + // });
87 } 104 }
88 105
89 // 下面是接口回调的satus ,因为我做了一些错误页面,所以都会指向对应的报错页面 106 // 下面是接口回调的satus ,因为我做了一些错误页面,所以都会指向对应的报错页面
@@ -109,7 +109,7 @@ @@ -109,7 +109,7 @@
109 //NProgress.done(); 109 //NProgress.done();
110 let status = res.status; 110 let status = res.status;
111 let authentication = res.data.authentication; 111 let authentication = res.data.authentication;
112 - let loginSuccess = authentication.token; 112 + let token = authentication.token;
113 let loginUserMenus = res.data.loginUserMenus; 113 let loginUserMenus = res.data.loginUserMenus;
114 if (status !== 200) { 114 if (status !== 200) {
115 let msg = "登录错误"; 115 let msg = "登录错误";
@@ -117,12 +117,11 @@ @@ -117,12 +117,11 @@
117 message: msg, 117 message: msg,
118 type: "error" 118 type: "error"
119 }); 119 });
120 - } else if (loginSuccess) { 120 + } else if (token) {
121 sessionStorage.setItem('user', JSON.stringify(authentication)); 121 sessionStorage.setItem('user', JSON.stringify(authentication));
122 - sessionStorage.setItem('token','Bearer '+ loginSuccess);  
123 - //设置token,设置axios 基本配置  
124 - let token = sessionStorage.getItem('token');  
125 - axios.defaults.headers.common['Authorization'] = token; 122 + sessionStorage.setItem('token','Bearer '+ token);
  123 + //设置token,设置axios 基本配置,但是刷新后 这个登录保存的就没了
  124 + axios.defaults.headers.common['Authorization'] = 'Bearer '+token;
126 //处理用户menu 125 //处理用户menu
127 _this.userMenus = loginUserMenus.list; 126 _this.userMenus = loginUserMenus.list;
128 console.log("userMenus:"); 127 console.log("userMenus:");
@@ -140,11 +139,8 @@ @@ -140,11 +139,8 @@
140 _this.$router.push({path: '/main'}); 139 _this.$router.push({path: '/main'});
141 } 140 }
142 }).catch(error => { 141 }).catch(error => {
143 - let msg = error.message;  
144 - let errResponse = error.response.statusText;  
145 - let defaultLoginErr = "登录失败";  
146 this.$message({ 142 this.$message({
147 - message: defaultLoginErr, 143 + message: error.toString(),
148 type: "error" 144 type: "error"
149 }); 145 });
150 this.logining = false; 146 this.logining = false;