朱兆平 / vue_cli · 提交

转到一个项目

作者 朱兆平
提交 370f9deb541840eb0a06dd7f2af36a31f0633279 1 个父辈 5ee42f1b

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

内嵌 并排对比
正在显示 7 个修改的文件 包含 128 行增加 和 55 行删除
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 }); };
... ...
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',
}
})
}
}
... ...
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 }); };
... ...
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)};
\ No newline at end of file
... ...
... ... @@ -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,
... ...
... ... @@ -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:");
... ...
... ... @@ -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(() => {
... ...