renew jwt
This commit is contained in:
parent
fb7a1f5660
commit
55144f7657
5
package-lock.json
generated
5
package-lock.json
generated
@ -3529,6 +3529,11 @@
|
|||||||
"integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=",
|
"integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"jwt-decode": {
|
||||||
|
"version": "2.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-2.2.0.tgz",
|
||||||
|
"integrity": "sha1-fYa9VmefWM5qhHBKZX3TkruoGnk="
|
||||||
|
},
|
||||||
"kind-of": {
|
"kind-of": {
|
||||||
"version": "3.2.2",
|
"version": "3.2.2",
|
||||||
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
|
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
|
||||||
|
@ -32,6 +32,7 @@
|
|||||||
"axios": "^0.16.2",
|
"axios": "^0.16.2",
|
||||||
"babel-polyfill": "^6.26.0",
|
"babel-polyfill": "^6.26.0",
|
||||||
"intersection-observer": "^0.4.0",
|
"intersection-observer": "^0.4.0",
|
||||||
|
"jwt-decode": "^2.2.0",
|
||||||
"vue": "^2.4.2",
|
"vue": "^2.4.2",
|
||||||
"vue-observe-visibility": "^0.1.3",
|
"vue-observe-visibility": "^0.1.3",
|
||||||
"vue-router": "^2.7.0",
|
"vue-router": "^2.7.0",
|
||||||
|
@ -26,6 +26,7 @@ export default {
|
|||||||
.then(user => {
|
.then(user => {
|
||||||
console.log("---- user login --------");
|
console.log("---- user login --------");
|
||||||
console.log(user);
|
console.log(user);
|
||||||
|
this.$router.go(-1);
|
||||||
})
|
})
|
||||||
.catch(error => {
|
.catch(error => {
|
||||||
console.log("---- login error -------");
|
console.log("---- login error -------");
|
||||||
|
130
src/main.js
130
src/main.js
@ -2,6 +2,7 @@ import Vue from 'vue';
|
|||||||
import Vuex from 'vuex';
|
import Vuex from 'vuex';
|
||||||
import VueRouter from 'vue-router';
|
import VueRouter from 'vue-router';
|
||||||
import Axios from 'axios';
|
import Axios from 'axios';
|
||||||
|
import JwtDecode from 'jwt-decode';
|
||||||
|
|
||||||
import App from './app.vue';
|
import App from './app.vue';
|
||||||
import Dashboard from './components/dashboard.vue';
|
import Dashboard from './components/dashboard.vue';
|
||||||
@ -11,12 +12,33 @@ import Userlist from './components/userlist.vue';
|
|||||||
Vue.use(VueRouter);
|
Vue.use(VueRouter);
|
||||||
Vue.use(Vuex);
|
Vue.use(Vuex);
|
||||||
|
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
path: '/login',
|
||||||
|
component: LoginForm
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
component: Dashboard
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/userlist',
|
||||||
|
component: Userlist
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const router = new VueRouter({
|
||||||
|
routes
|
||||||
|
});
|
||||||
|
|
||||||
const store = new Vuex.Store({
|
const store = new Vuex.Store({
|
||||||
state: {
|
state: {
|
||||||
api: {},
|
api: {},
|
||||||
navigation: [],
|
navigation: [],
|
||||||
login: {},
|
login: {},
|
||||||
authToken: '',
|
authToken: '',
|
||||||
|
jwt: {},
|
||||||
credentials: {}
|
credentials: {}
|
||||||
},
|
},
|
||||||
mutations: {
|
mutations: {
|
||||||
@ -37,34 +59,79 @@ const store = new Vuex.Store({
|
|||||||
setLogin(state, payload) {
|
setLogin(state, payload) {
|
||||||
state.login = payload.User;
|
state.login = payload.User;
|
||||||
state.authToken = payload.AuthToken;
|
state.authToken = payload.AuthToken;
|
||||||
|
state.jwt = JwtDecode(payload.AuthToken);
|
||||||
|
},
|
||||||
|
clearLogin() {
|
||||||
|
state.login = {};
|
||||||
|
state.authToken = '';
|
||||||
|
state.jwt = {};
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
actions: {
|
actions: {
|
||||||
apiRequest(context, payload) {
|
apiRequest(context, payload) {
|
||||||
return new Promise((resolve, reject) => {
|
let doRequest = () => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
Axios({
|
||||||
|
method: payload.method ? payload.method : 'get',
|
||||||
|
baseURL: context.state.api.baseURL,
|
||||||
|
url: payload.endpoint,
|
||||||
|
params: payload.params,
|
||||||
|
data: payload.data,
|
||||||
|
headers: {
|
||||||
|
'X-Auth-Token': context.state.authToken
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then(response => {
|
||||||
|
console.log(response);
|
||||||
|
resolve(response.data);
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.dir(error);
|
||||||
|
reject(error);
|
||||||
|
})
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
if (payload.endpoint != 'login') {
|
||||||
|
// no jwt check for login call
|
||||||
|
|
||||||
Axios({
|
// empty username = not logged in
|
||||||
method: payload.method ? payload.method : 'get',
|
if (!context.state.credentials.username) {
|
||||||
baseURL: context.state.api.baseURL,
|
return new Promise((resolve, reject) => {
|
||||||
url: payload.endpoint,
|
// show login page
|
||||||
params: payload.params,
|
router.push('/login');
|
||||||
data: payload.data,
|
reject(['not logged in']);
|
||||||
headers: {
|
});
|
||||||
'X-Auth-Token': context.state.authToken
|
}
|
||||||
}
|
|
||||||
})
|
let now = Math.round(Date.now() / 1000);
|
||||||
.then(response => {
|
if ( context.state.jwt.exp < (now + 300) ) {
|
||||||
console.log(response);
|
// too old jwt, logout
|
||||||
resolve(response.data);
|
return new Promise((resolve, reject) => {
|
||||||
})
|
context.commit('clearLogin');
|
||||||
.catch(error => {
|
router.push('/login');
|
||||||
console.dir(error);
|
reject(['jwt too old, logout']);
|
||||||
reject(error);
|
});
|
||||||
})
|
}
|
||||||
});
|
|
||||||
|
if ( (context.state.jwt.exp - 60) < now ) {
|
||||||
|
// jwt near expire, get new one
|
||||||
|
console.log("getting new jwt");
|
||||||
|
|
||||||
|
return context.dispatch('login', context.state.credentials)
|
||||||
|
.then(() => {
|
||||||
|
console.log("LOOOGIIIINNN");
|
||||||
|
return doRequest();
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
throw error;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return doRequest();
|
||||||
},
|
},
|
||||||
login(context, payload) {
|
login(context, payload) {
|
||||||
context.commit('setCredentials', payload);
|
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
context.dispatch('apiRequest', {
|
context.dispatch('apiRequest', {
|
||||||
method: 'post',
|
method: 'post',
|
||||||
@ -72,6 +139,7 @@ const store = new Vuex.Store({
|
|||||||
data: payload
|
data: payload
|
||||||
})
|
})
|
||||||
.then(data => {
|
.then(data => {
|
||||||
|
context.commit('setCredentials', payload);
|
||||||
context.commit('setLogin', data);
|
context.commit('setLogin', data);
|
||||||
resolve(data.User);
|
resolve(data.User);
|
||||||
})
|
})
|
||||||
@ -87,26 +155,6 @@ const store = new Vuex.Store({
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
const routes = [
|
|
||||||
{
|
|
||||||
path: '/login',
|
|
||||||
component: LoginForm
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/',
|
|
||||||
component: Dashboard
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/userlist',
|
|
||||||
component: Userlist
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
const router = new VueRouter({
|
|
||||||
routes
|
|
||||||
});
|
|
||||||
|
|
||||||
// load init
|
// load init
|
||||||
Axios.get('conf/init.json')
|
Axios.get('conf/init.json')
|
||||||
.then(results => {
|
.then(results => {
|
||||||
|
Loading…
Reference in New Issue
Block a user