vue实现用户登录页面,登录成功后,需在所有请求头中添加sessiontoken,值为登陆成功的返回值uuid,响应头 “sessiontoken”,需要作为登陆后每次请求的“sessiontoken”请求头,建议放置到Cookie或localStorage中。同时,前端需要生成一个PageToken放置到sessionstorage中,作为登陆后每次请求的“PageToken”请求头,用于验证当前标签页是否属于当前用户。响应头中的SessionStatus值用户判断用户登录状态
0 验证通过,无需跳转
1 用户已登录(自动跳转到地图页面)
-1 当前请求无SessionToken或PageToken,无权限
-2 用户未登录 或 用户长时间无操作,登录超时
-3 用户在其他地方登录,当前用户被迫下线
-4 当前标签页不属于当前用户
(-1~-4需要跳转到登录页面(login.vue))
新建三个js文件,分别为http.js文件、store.js
http.js文件为axios请求拦截器和响应拦截器
export const request = (config) => {
return axios(config)
};
//添加请求拦截器
axios.interceptors.request.use(
config => {
if (localStorage.getItem('sessiontoken') && sessionStorage.getItem('PageToken')) {
//将localstorage中的sessiontoken和sessionstorage中的PageToken添加到请求头中
config.headers.common['sessiontoken'] = localStorage.getItem('sessiontoken');
config.headers.common['PageToken'] = sessionStorage.getItem('PageToken');
}
return config;
},
error => {
return Promise.reject(error);
});
// 添加响应拦截器,获取响应头的token
axios.interceptors.response.use(response => {
if (response.status === 200 && response.config.method != 'options') { //响应成功后
let sessionStatus = response.headers['sessionstatus'];
if (response.headers['sessiontoken']) { //获取响应头里面的数据
store.state.sessiontoken = response.headers['sessiontoken'];
}
if (sessionStatus == -1) {
Message({
type: 'warning',
message: '无权限!'
});
localStorage.removeItem('sessiontoken');
store.commit('loginSuccess', null);
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
}
if (sessionStatus == -2) {
Message({
type: 'warning',
message: '登录超时!'
});
localStorage.removeItem('sessiontoken');
store.commit('loginSuccess', null);
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
}
if (sessionStatus == -3) {
Message({
type: 'warning',
message: '当前用户已在其他地方登录!'
});
localStorage.removeItem('sessiontoken');
store.commit('loginSuccess', null);
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
}
if (sessionStatus == -4) {
Message({
type: 'warning',
message: '该标签页不属于当前用户!'
});
localStorage.removeItem('sessiontoken');
store.commit('loginSuccess', null);
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
}
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
}, error => { //报错后的处理,这里不是重点,
// 服务器状态码不是200的情况
if (error.response.status) {
switch (error.response.status) {
case 401:
alert('登录过期,请重新登录');
// 清除token
localStorage.removeItem('sessiontoken');
store.commit('loginSuccess', null);
setTimeout(() => {
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
}, 1000);
break;
case 404:
alert('网络请求不存在');
break;
case 504:
alert('服务器内部异常');
break;
// 其他错误,直接抛出错误
default:
alert("请求错误:" + error.response.status);
}
return Promise.reject(error.response);
}
});
export default axios
store.js为设置localstorage用于存储sessiontoken
const store = new Vuex.Store({
state: {
// 存储token
sessiontoken: localStorage.getItem('sessiontoken') ? localStorage.getItem('sessiontoken') : ''
},
mutations: {
// 修改token,并将token存入localStorage
changeLogin (state, user) {
state.sessiontoken = user.sessiontoken;
localStorage.setItem('sessiontoken', user.sessiontoken);
}
}
});
export default store;
在登录界面设置sessiontoken用于存储PageToken
self.PageToken=Math.random().toString(36).substr(2);
sessionStorage.setItem('PageToken',self.PageToken);
最后在main.js文件中设置
axios.defaults.headers.common['sessiontoken'] = store.state.sessiontoken;
axios.defaults.headers.common['PageToken'] = sessionStorage.getItem('PageToken');