作者 朱兆平

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

... ... @@ -2,7 +2,7 @@ import axios from 'axios'
import qs from 'qs'
axios.defaults.baseURL = 'http://localhost:8082/api';
axios.defaults.baseURL = '/api';
... ... @@ -55,7 +55,7 @@ export default {
data: qs.stringify(data), // post 请求的数据
timeout: 30000, // 超时时间, 单位毫秒
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Content-Type': 'application/x-www-form-urlencoded'
}
})
}
... ...
... ... @@ -12,7 +12,7 @@ import axios from 'axios'
//import 'nprogress/nprogress.css'
import rout from './routes'
import Mock from './mock'
import 'font-awesome/css/font-awesome.min.css'
//定义一个全局过滤器实现日期格式化
Vue.filter('datefmt',function(input,fmtstring){
... ... @@ -23,12 +23,12 @@ Vue.filter('datefmt',function(input,fmtstring){
Vue.config.productionTip = false
Mock.bootstrap();
import 'font-awesome/css/font-awesome.min.css'
Vue.use(ElementUI)
Vue.use(VueRouter)
Vue.use(Vuex)
Vue.prototype.$axios = axios;
//NProgress.configure({ showSpinner: false });
console.log("mainjs:");
... ... @@ -36,6 +36,7 @@ console.log(rout.routes);
const router = new VueRouter({
routes:rout.routes
});
Vue.prototype.$rout =router;
//本地存储系统初始化的router路由,用来处理用户退出后,把路由数据初始化
sessionStorage.setItem('sysMenu', JSON.stringify(rout.routes));
... ... @@ -48,6 +49,9 @@ router.beforeEach((to, from, next) => {
sessionStorage.removeItem('token');
}
let user = JSON.parse(sessionStorage.getItem('user'));
if(sessionStorage.getItem('token')){
axios.defaults.headers.common['Authorization'] = sessionStorage.getItem('token');
}
if (!user && to.path != '/login' && !sessionStorage.getItem('menu') && !sessionStorage.getItem('token')) {
next({ path: '/login' })
} else {
... ... @@ -57,12 +61,19 @@ router.beforeEach((to, from, next) => {
axios.interceptors.response.use(
res => {
//调用ELEMETN的message组件
let msg= Vue.prototype.$message;
//调用route组件
let route = Vue.prototype.$rout;
route.push({
path: "/main"
});
//对响应数据做些事
if (res.data && res.status!==200) {
this.$message({
msg({
// 饿了么的消息弹窗组件,类似toast
showClose: true,
message: res.data.error.message.message ? res.data.error.message.message : res.data.error.message,
message: 'res.data.error.message.message ? res.data.error.message.message : res.data.error.message',
type: "error"
});
return Promise.reject(res.data.error.message);
... ... @@ -81,9 +92,15 @@ axios.interceptors.response.use(
// 下面是接口回调的satus ,因为我做了一些错误页面,所以都会指向对应的报错页面
if (error.response.status === 401) {
router.push({
path: "/login"
Vue.prototype.$message({
// 饿了么的消息弹窗组件,类似toast
showClose: true,
message: '未授权,请登录',
type: "error"
});
// router.push({
// path: "/login"
// });
}
// 下面是接口回调的satus ,因为我做了一些错误页面,所以都会指向对应的报错页面
... ...
... ... @@ -109,7 +109,7 @@
//NProgress.done();
let status = res.status;
let authentication = res.data.authentication;
let loginSuccess = authentication.token;
let token = authentication.token;
let loginUserMenus = res.data.loginUserMenus;
if (status !== 200) {
let msg = "登录错误";
... ... @@ -117,12 +117,11 @@
message: msg,
type: "error"
});
} else if (loginSuccess) {
} else if (token) {
sessionStorage.setItem('user', JSON.stringify(authentication));
sessionStorage.setItem('token','Bearer '+ loginSuccess);
//设置token,设置axios 基本配置
let token = sessionStorage.getItem('token');
axios.defaults.headers.common['Authorization'] = token;
sessionStorage.setItem('token','Bearer '+ token);
//设置token,设置axios 基本配置,但是刷新后 这个登录保存的就没了
axios.defaults.headers.common['Authorization'] = 'Bearer '+token;
//处理用户menu
_this.userMenus = loginUserMenus.list;
console.log("userMenus:");
... ... @@ -140,11 +139,8 @@
_this.$router.push({path: '/main'});
}
}).catch(error => {
let msg = error.message;
let errResponse = error.response.statusText;
let defaultLoginErr = "登录失败";
this.$message({
message: defaultLoginErr,
message: error.toString(),
type: "error"
});
this.logining = false;
... ...