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

朱兆平
src/api/api.js
src/api/http.js
src/api/role_api.js
src/api/user.js
src/main.js
src/views/Login.vue
src/views/nav1/user.vue
--- a/src/api/api.js
查看文件 @370f9de
+++ b/src/api/api.js
查看文件 @370f9de
 import axios from 'axios'
 import Vue from 'vue'
 import qs from 'qs'
-// let base = 'http://127.0.0.1:7003';
-axios.defaults.baseURL = 'http://localhost:8082/api';
+
 Vue.prototype.$http = axios;
-export const requestLogin = params => {
-    return axios({
-        method: 'POST',
-        url: '/login',
-        data: qs.stringify(params),
-        withCredentials: true,
-        //下面转换成urlencode参数，也可以用QS包处理，qs.stringify(data)
-        // transformRequest: [function (data) {
-        //     // Do whatever you want to transform the data
-        //     let ret = ''
-        //     for (let it in data) {
-        //         ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
-        //     }
-        //     return ret
-        // }],
-        headers: {
-            'Content-Type': 'application/x-www-form-urlencoded'
-        }
-    })
-    // return axios.post(`${base}/login`, params).then(res => res.data);
-};
+
 export const getuserMenus = params => { return axios.get(`/perm/userMenus`, { params: params }); };
 export const getUserList = params => { return axios.get(`/user/list`, { params: params }); };
--- a/src/api/http.js
查看文件 @370f9de
+++ b/src/api/http.js
查看文件 @370f9de
 import axios from 'axios'
+import qs from 'qs'
+
+
 axios.defaults.baseURL = 'http://localhost:8082/api';
-let base = axios.defaults.baseURL+'/role';
-axios.interceptors.request.use(config => {
-    // 这里可以加一些动作, 比如来个进度条开始动作,
-    return config
-}, error => {
-    return Promise.reject(error)
-});
-axios.interceptors.response.use(response => response, error => Promise.resolve(error.response));
 export default {
     post(url, data) {
         return axios({
-            method: 'post', // 请求协议
+            method: 'POST', // 请求协议
             url: url, // 请求的地址
-            data: qs.stringify(data), // post 请求的数据
+            data: data, // post 请求的数据
             timeout: 30000, // 超时时间, 单位毫秒
             headers: {
-                'Content-Type': 'application/json;charset=UTF-8'
+                'Content-Type': 'application/json;charset=UTF-8',
             }
         })
     },
     get(url, params) {
-        return axios.get(`${base}/${url}`, { params: params });
+        return axios({
+            method: 'GET',
+            url: url,
+            data: params,
+            headers: {
+                'Content-Type': 'application/json;charset=UTF-8',
+            }
+        });
     },
     put(url, params){
         return axios({
             method: 'PUT',
-            url: `${base}/${url}`,
+            url: url,
             data: params,
             headers: {
                 'Content-Type': 'application/json;charset=UTF-8'
@@ -39,12 +41,23 @@ export default {
     del: (url,params) => {
         return axios({
             method: 'DELETE',
-            url: `${base}/${url}`,
+            url: url,
             data: params,
             headers: {
                 'Content-Type': 'application/json;charset=UTF-8'
             }
         })
+    },
+    login: data =>{
+        return axios({
+            method: 'POST', // 请求协议
+            url: '/login', // 请求的地址
+            data: qs.stringify(data), // post 请求的数据
+            timeout: 30000, // 超时时间, 单位毫秒
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded',
+            }
+        })
     }
 }
--- a/src/api/role_api.js
查看文件 @370f9de
+++ b/src/api/role_api.js
查看文件 @370f9de
 import axios from 'axios'
-axios.defaults.baseURL = 'http://localhost:8082/api';
-let base = axios.defaults.baseURL+'/role';
+let base = '/role';
 export const getList = params => { return axios.get(`${base}/list`, { params: params }); };
--- a/src/api/user.js 0 → 100644
查看文件 @370f9de
+++ b/src/api/user.js 0 → 100644
查看文件 @370f9de
+import http from './http.js'
+let baseUrl = '/user'
+
+export const getUserList = params => { return http.get(`${baseUrl}/list`,  params); };
+
+export const getUserListPage = params => { return http.get(`/user/list`,params) };
+
+export const removeUser = params => { return http.del(`/user/del`,params)};
+
+export const batchRemoveUser = params => { return http.del(`/user/batchremove`, { params: params }); };
+
+export const editUser = params => { return http.put(`/user/edit`,params)};
+
+export const addUser = params => { return http.post(`/user/add`,params)};
+
+export const setUserRole = params => { return http.put(`/user/roleset`,params)};
--- a/src/main.js
查看文件 @370f9de
+++ b/src/main.js
查看文件 @370f9de
@@ -7,6 +7,7 @@ import 'element-ui/lib/theme-default/index.css'
 import VueRouter from 'vue-router'
 import store from './vuex/store'
 import Vuex from 'vuex'
+import axios from 'axios'
 //import NProgress from 'nprogress'
 //import 'nprogress/nprogress.css'
 import rout from './routes'
@@ -18,7 +19,9 @@ Vue.filter('datefmt',function(input,fmtstring){
     return moment(input).format(fmtstring)
-})
+});
+
+
 Mock.bootstrap();
 import 'font-awesome/css/font-awesome.min.css'
@@ -42,20 +45,81 @@ router.beforeEach((to, from, next) => {
   if (to.path == '/login') {
     sessionStorage.removeItem('user');
     sessionStorage.removeItem('menu');
+      sessionStorage.removeItem('token');
   }
   let user = JSON.parse(sessionStorage.getItem('user'));
-  if (!user && to.path != '/login' && !sessionStorage.getItem('menu')) {
+  if (!user && to.path != '/login' && !sessionStorage.getItem('menu') && !sessionStorage.getItem('token')) {
     next({ path: '/login' })
   } else {
     next()
   }
-})
+});
+
+axios.interceptors.response.use(
+    res => {
+        //对响应数据做些事
+        if (res.data && res.status===200) {
+            this.$message({
+                //  饿了么的消息弹窗组件,类似toast
+                showClose: true,
+                message: res.data.error.message.message ? res.data.error.message.message : res.data.error.message,
+                type: "error"
+            });
+            return Promise.reject(res.data.error.message);
+        }
+        return res;
+    },
+    error => {
+        // 用户登录的时候会拿到一个基础信息,比如用户名,token,过期时间戳
+        // 直接丢localStorage或者sessionStorage
+        if (!sessionStorage.getItem("token")) {
+            // 若是接口访问的时候没有发现有鉴权的基础信息,直接返回登录页
+            router.push({
+                path: "/login"
+            });
+        } else {
+
+            // 下面是接口回调的satus ,因为我做了一些错误页面,所以都会指向对应的报错页面
+            if (error.response.status === 401) {
+                router.push({
+                    path: "/login"
+                });
+            }
+
+            // 下面是接口回调的satus ,因为我做了一些错误页面,所以都会指向对应的报错页面
+            if (error.response.status === 403) {
+                router.push({
+                    path: "/error/403"
+                });
+            }
+            if (error.response.status === 500) {
+                router.push({
+                    path: "/error/500"
+                });
+            }
+            if (error.response.status === 502) {
+                router.push({
+                    path: "/error/502"
+                });
+            }
+            if (error.response.status === 404) {
+                router.push({
+                    path: "/error/404"
+                });
+            }
+        }
+        // 返回 response 里的错误信息
+        let errorInfo =  error.data.error ? error.data.error.message : error.data;
+        return Promise.reject(errorInfo);
+    }
+);
+
 //router.afterEach(transition => {
 //NProgress.done();
 //});
-new Vue({
+let vue = new Vue({
   //el: '#app',
   //template: '<App/>',
   router,
--- a/src/views/Login.vue
查看文件 @370f9de
+++ b/src/views/Login.vue
查看文件 @370f9de
@@ -32,8 +32,8 @@
 </template>
 <script>
-  import { requestLogin,getuserMenus } from '../api/api';
-  import rt from '../routes'
+  import axios from 'axios'
+  import http from '../api/http';
   //import NProgress from 'nprogress'
   export default {
     data() {
@@ -104,13 +104,12 @@
                     this.logining = true;
                     //NProgress.start();
                     var loginParams = {username: this.ruleForm2.account, password: this.ruleForm2.checkPass};
-                    requestLogin(loginParams).then(res => {
+                    http.login(loginParams).then(res => {
                         this.logining = false;
                         //NProgress.done();
                         let status = res.status;
                         let authentication = res.data.authentication;
-                        let user = authentication.principal;
-                        let loginSuccess = authentication.authenticated;
+                        let loginSuccess = authentication.token;
                         let loginUserMenus = res.data.loginUserMenus;
                         if (status !== 200) {
                             let msg = "登录错误";
@@ -119,7 +118,11 @@
                                 type: "error"
                             });
                         } else if (loginSuccess) {
-                            sessionStorage.setItem('user', JSON.stringify(user));
+                            sessionStorage.setItem('user', JSON.stringify(authentication));
+                            sessionStorage.setItem('token','Bearer '+ loginSuccess);
+                            //设置token,设置axios 基本配置
+                            let token = sessionStorage.getItem('token');
+                            axios.defaults.headers.common['Authorization'] = token;
                             //处理用户menu
                             _this.userMenus =  loginUserMenus.list;
                             console.log("userMenus:");
--- a/src/views/nav1/user.vue
查看文件 @370f9de
+++ b/src/views/nav1/user.vue
查看文件 @370f9de
@@ -56,7 +56,7 @@
 		<!--工具条-->
 		<el-col :span="24" class="toolbar">
 			<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
-			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="5" :total="total" style="float:right;">
+			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
 			</el-pagination>
 		</el-col>
@@ -183,7 +183,7 @@
 <script>
 	import util from '../../common/js/util'
 	import NProgress from 'nprogress'
-	import { getUserList, removeUser, batchRemoveUser, editUser, addUser, setUserRole } from '../../api/api';
+	import { getUserList, removeUser, batchRemoveUser, editUser, addUser, setUserRole } from '../../api/user';
     import { getList} from '../../api/role_api';
     import moment from 'moment'
 	export default {
@@ -265,7 +265,7 @@
 				this.getUsers();
 			},
 			//获取用户列表
-			getUsers() {
+			getUsers:function() {
 				let para = {
                     pageNum: this.pageNum,
                     pageSize: this.pageSize,
@@ -280,9 +280,8 @@
 					//NProgress.done();
 				}).catch((error) => {
                     this.listLoading = false;
-                    let res= error.response.data;
-                    alert(res.msg);
+                    alert(error);
 				});
 			},
@@ -436,7 +435,7 @@
 			},
 			//批量删除
 			batchRemove: function () {
-				var ids = this.sels.map(item => item.id).toString();
+				var ids = this.sels.map(item => item.userId).toString();
 				this.$confirm('确认删除选中记录吗？', '提示', {
 					type: 'warning'
 				}).then(() => {