Commit 0f322860 authored by Khalid Ali's avatar Khalid Ali
Browse files

Try Vuex and Add CSRF token to requests

parent b47211f7
......@@ -857,7 +857,7 @@
},
"@types/strip-bom": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/@types/strip-bom/-/strip-bom-3.0.0.tgz",
"resolved": "http://registry.npmjs.org/@types/strip-bom/-/strip-bom-3.0.0.tgz",
"integrity": "sha1-FKjsOVbC6B7bdSB5CuzyHCkK69I=",
"dev": true
},
......@@ -1696,7 +1696,7 @@
"dependencies": {
"semver": {
"version": "5.0.3",
"resolved": "https://registry.npmjs.org/semver/-/semver-5.0.3.tgz",
"resolved": "http://registry.npmjs.org/semver/-/semver-5.0.3.tgz",
"integrity": "sha1-d0Zt5YnNXTyV8TiqeLxWmjy10no=",
"dev": true
}
......@@ -1858,7 +1858,7 @@
},
"array-equal": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/array-equal/-/array-equal-1.0.0.tgz",
"resolved": "http://registry.npmjs.org/array-equal/-/array-equal-1.0.0.tgz",
"integrity": "sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=",
"dev": true
},
......@@ -2178,7 +2178,7 @@
"dependencies": {
"jsesc": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/jsesc/-/jsesc-1.3.0.tgz",
"resolved": "http://registry.npmjs.org/jsesc/-/jsesc-1.3.0.tgz",
"integrity": "sha1-RsP+yMGJKxKwgz25vHYiF226s0s=",
"dev": true
}
......@@ -2242,7 +2242,7 @@
},
"babel-plugin-istanbul": {
"version": "4.1.6",
"resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.6.tgz",
"resolved": "http://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.6.tgz",
"integrity": "sha512-PWP9FQ1AhZhS01T/4qLSKoHGY/xvkZdVBGlKM/HuxxS3+sC66HhTNR7+MpbO/so/cz/wY94MeSWJuP1hXIPfwQ==",
"dev": true,
"requires": {
......@@ -2430,7 +2430,7 @@
},
"json5": {
"version": "0.5.1",
"resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
"resolved": "http://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
"integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
"dev": true
},
......@@ -2823,7 +2823,7 @@
"dependencies": {
"resolve": {
"version": "1.1.7",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz",
"resolved": "http://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz",
"integrity": "sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=",
"dev": true
}
......@@ -3149,7 +3149,7 @@
},
"chai-nightwatch": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/chai-nightwatch/-/chai-nightwatch-0.1.1.tgz",
"resolved": "http://registry.npmjs.org/chai-nightwatch/-/chai-nightwatch-0.1.1.tgz",
"integrity": "sha1-HKVt52jTwIaP5/wvTTLC/olOa+k=",
"dev": true,
"requires": {
......@@ -3480,7 +3480,7 @@
},
"commander": {
"version": "2.9.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.9.0.tgz",
"resolved": "http://registry.npmjs.org/commander/-/commander-2.9.0.tgz",
"integrity": "sha1-nJkJQXbhIkDLItbFFGCYQA/g99Q=",
"dev": true,
"requires": {
......@@ -4247,7 +4247,7 @@
},
"deep-eql": {
"version": "0.1.3",
"resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-0.1.3.tgz",
"resolved": "http://registry.npmjs.org/deep-eql/-/deep-eql-0.1.3.tgz",
"integrity": "sha1-71WKyrjeJSBs1xOQbXTlaTDrafI=",
"dev": true,
"requires": {
......@@ -5353,7 +5353,7 @@
},
"expand-range": {
"version": "1.8.2",
"resolved": "https://registry.npmjs.org/expand-range/-/expand-range-1.8.2.tgz",
"resolved": "http://registry.npmjs.org/expand-range/-/expand-range-1.8.2.tgz",
"integrity": "sha1-opnv/TNf4nIeuujiV+x5ZE/IUzc=",
"dev": true,
"requires": {
......@@ -5860,7 +5860,7 @@
"dependencies": {
"json5": {
"version": "0.5.1",
"resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
"resolved": "http://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
"integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
"dev": true
}
......@@ -6178,7 +6178,7 @@
},
"readable-stream": {
"version": "1.1.14",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
"resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
"integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
"dev": true,
"requires": {
......@@ -6190,7 +6190,7 @@
},
"string_decoder": {
"version": "0.10.31",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
"resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
"integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
"dev": true
}
......@@ -7983,7 +7983,7 @@
},
"json5": {
"version": "0.5.1",
"resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
"resolved": "http://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
"integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
"dev": true
},
......@@ -8087,7 +8087,7 @@
},
"jest-get-type": {
"version": "22.4.3",
"resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-22.4.3.tgz",
"resolved": "http://registry.npmjs.org/jest-get-type/-/jest-get-type-22.4.3.tgz",
"integrity": "sha512-/jsz0Y+V29w1chdXVygEKSz2nBoHoYqNShPe+QgxSNjAuP1i8+k4LbQNrfoliKej0P45sivkSCh7yiD6ubHS3w==",
"dev": true
},
......@@ -8548,7 +8548,7 @@
},
"json5": {
"version": "0.5.1",
"resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
"resolved": "http://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
"integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
"dev": true
},
......@@ -8703,9 +8703,9 @@
}
},
"jquery": {
"version": "1.12.4",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-1.12.4.tgz",
"integrity": "sha1-AeHfuikP5z3rp3zurLD5ui/sngw="
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
"integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg=="
},
"js-beautify": {
"version": "1.8.9",
......@@ -8967,7 +8967,7 @@
},
"load-json-file": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
"resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
"integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
"dev": true,
"requires": {
......@@ -8980,7 +8980,7 @@
"dependencies": {
"pify": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
"dev": true
}
......@@ -9671,7 +9671,7 @@
"dependencies": {
"debug": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.2.0.tgz",
"resolved": "http://registry.npmjs.org/debug/-/debug-2.2.0.tgz",
"integrity": "sha1-+HBX6ZWxofauaklgZkE3vFbwOdo=",
"dev": true,
"requires": {
......@@ -9700,7 +9700,7 @@
},
"ms": {
"version": "0.7.1",
"resolved": "https://registry.npmjs.org/ms/-/ms-0.7.1.tgz",
"resolved": "http://registry.npmjs.org/ms/-/ms-0.7.1.tgz",
"integrity": "sha1-nNE8A62/8ltl7/3nzoZO6VIBcJg=",
"dev": true
},
......@@ -10413,7 +10413,7 @@
"dependencies": {
"minimist": {
"version": "0.0.10",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
"resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
"integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=",
"dev": true
}
......@@ -10515,7 +10515,7 @@
},
"get-stream": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
"resolved": "http://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
"integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
"dev": true
},
......@@ -11501,7 +11501,7 @@
},
"proxy-agent": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/proxy-agent/-/proxy-agent-2.0.0.tgz",
"resolved": "http://registry.npmjs.org/proxy-agent/-/proxy-agent-2.0.0.tgz",
"integrity": "sha1-V+tTR6qAXXTsaByyVknbo5yTNJk=",
"dev": true,
"requires": {
......@@ -11526,7 +11526,7 @@
},
"lru-cache": {
"version": "2.6.5",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.6.5.tgz",
"resolved": "http://registry.npmjs.org/lru-cache/-/lru-cache-2.6.5.tgz",
"integrity": "sha1-5W1jVBSO3o13B7WNFDIg/QjfD9U=",
"dev": true
},
......@@ -11725,7 +11725,7 @@
},
"pify": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
"dev": true
}
......@@ -14481,6 +14481,16 @@
"resolved": "https://registry.npmjs.org/vuelidate/-/vuelidate-0.7.4.tgz",
"integrity": "sha512-QHZWYOL325Zo+2K7VBNEJTZ496Kd8Z31p85aQJFldKudUUGBmgw4zu4ghl4CyqPwjRCmqZ9lDdx4FSdMnu4fGg=="
},
"vuex": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.0.tgz",
"integrity": "sha512-mdHeHT/7u4BncpUZMlxNaIdcN/HIt1GsGG5LKByArvYG/v6DvHcOxvDCts+7SRdCoIRGllK8IMZvQtQXLppDYg=="
},
"vuex-class": {
"version": "0.3.1",
"resolved": "https://registry.npmjs.org/vuex-class/-/vuex-class-0.3.1.tgz",
"integrity": "sha512-d7Hc+ItQx6p9E/2mEWiyrvyEuo7Uj0mq4VNImd7dmxTelnkhOavKPMEG1Xdypug2RlPEYv0920IOa3hdVZ+4AA=="
},
"w3c-hr-time": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz",
......@@ -15292,7 +15302,7 @@
},
"yargs": {
"version": "11.1.0",
"resolved": "https://registry.npmjs.org/yargs/-/yargs-11.1.0.tgz",
"resolved": "http://registry.npmjs.org/yargs/-/yargs-11.1.0.tgz",
"integrity": "sha512-NwW69J42EsCSanF8kyn5upxvjp5ds+t3+udGBeTbFnERA+lF541DDpMawzo4z6W/QrzNM18D+BPMiOBibnFV5A==",
"dev": true,
"requires": {
......
......@@ -25,7 +25,7 @@
"eslint-plugin-standard": "^4.0.0",
"https": "^1.0.0",
"install": "^0.12.2",
"jquery": "^1.12.4",
"jquery": "^3.3.1",
"popper.js": "^1.14.6",
"register-service-worker": "^1.5.2",
"serve": "^10.1.1",
......@@ -38,7 +38,9 @@
"vue-style-loader": "^4.1.2",
"vue-svg-loader": "^0.11.0",
"vue-svgicon": "^3.2.2",
"vuelidate": "^0.7.4"
"vuelidate": "^0.7.4",
"vuex": "^3.1.0",
"vuex-class": "^0.3.1"
},
"devDependencies": {
"@types/jest": "^23.3.13",
......
<template>
<div id="app">
<NavigationBar/>
<div id="contents">
<router-view/>
......
import axios from 'axios';
const https = require('https');
export default axios.create({
baseURL: `/api/`,
// var selector = document.querySelector('#token')
// if (selector == null) {
// selector = new Element();
// }
var axios_instance = axios.create({
// baseURL: `/api/`,
// baseURL: `https://localhost:9090/bs/api`,
headers: {
// 'Access-Control-Allow-Origin': '*'
// 'X-CSRF-TOKEN': selector.getAttribute('content')
//'Access-Control-Allow-Origin': '*'
},
withCredentials: true,
maxRedirects: 10,
});
\ No newline at end of file
});
// axios_instance.interceptors.response.use(function (config) {
// const token = config.headers["X-CSRF-TOKEN"]
// console.log(config);
// if (token != null) {
// localStorage.setItem("csrf_token", token)
// }
// return config
// });
// axios_instance.interceptors.request.use(function send_CSRF(config) {
// const token = localStorage.getItem("csrf_token");
// if (token != null || token != undefined || token != "") {
// config.headers["X-CSRF-TOKEN"] = token;
// }
// return config
// });
export default axios_instance;
\ No newline at end of file
......@@ -4,6 +4,7 @@ import BootstrapVue from 'bootstrap-vue';
import SvgIcon from 'vue-svgicon';
import App from './App.vue';
import router from './router';
import store from './store';
import './registerServiceWorker';
import 'bootstrap';
......@@ -20,4 +21,5 @@ router.beforeEach((to, from, next) => {
new Vue({
router,
render: (h) => h(App),
store,
}).$mount('#app');
import { ActionTree } from 'vuex';
import API from '../api';
import { ProfileState, User } from './types';
import { RootState } from '../types';
export const actions: ActionTree<ProfileState, RootState> = {
fetchData({ commit }): any {
API({
url: 'https://....'
}).then((response) => {
const payload: User = response && response.data;
commit('profileLoaded', payload);
}, (error) => {
console.log(error);
commit('profileError');
});
},
login({commit}): any {
return new Promise((resolve, reject) => {
commit('auth_request')
// API({url: 'http://localhost:8888/login', data: user, method: 'POST' })
API({url: 'https://localhost:8888/api/bs/api/login'})
.then(resp => {
const token = resp.data.token
const user = resp.data.user
localStorage.setItem('token', token)
API.defaults.headers.common['Authorization'] = token
commit('auth_success', token, user)
resolve(resp)
})
.catch(err => {
commit('auth_error')
localStorage.removeItem('token')
reject(err)
})
})
},
logout({commit}){
return new Promise((resolve, reject) => {
commit('logout')
localStorage.removeItem('token')
delete API.defaults.headers.common['Authorization']
resolve()
})
}
};
\ No newline at end of file
import { GetterTree } from 'vuex';
import { ProfileState } from './types';
import { RootState } from '../types';
export const getters: GetterTree<ProfileState, RootState> = {
fullName(state): string {
const { user } = state;
const firstName = (user && user.firstName) || '';
const lastName = (user && user.lastName) || '';
return `${firstName} ${lastName}`;
},
ticket(state): string {
return state.token || '';
},
isLoggedIn: state => !!state.token,
authStatus: state => state.status,
};
\ No newline at end of file
import { Module } from 'vuex';
import { getters } from './getters';
import { actions } from './actions';
import { mutations } from './mutations';
import { ProfileState } from './types';
import { RootState } from '../types';
export const state: ProfileState = {
user: undefined,
token: localStorage.getItem('token') || '',
status: '',
};
const namespaced: boolean = true;
export const profile: Module<ProfileState, RootState> = {
namespaced,
state,
getters,
actions,
mutations
};
\ No newline at end of file
import { MutationTree } from 'vuex';
import { ProfileState, User } from './types';
export const mutations: MutationTree<ProfileState> = {
// profileLoaded(state, payload: User) {
// state.error = false;
// state.user = payload;
// // state.token = token;
// },
// profileError(state) {
// state.error = true;
// state.user = undefined;
// }
auth_request(state){
state.status = 'loading'
},
auth_success(state, token){
state.status = 'success'
state.token = token
// state.user = user
},
auth_error(state){
state.status = 'error'
},
logout(state){
state.status = ''
state.token = ''
},
};
\ No newline at end of file
export interface User {
firstName: string;
lastName: string;
email: string;
phone?: string;
}
export interface ProfileState {
user?: User;
token: string;
status: string;
}
\ No newline at end of file
......@@ -35,5 +35,13 @@ export default new Router({
title: 'SRCT Bookshare - Create Listing',
},
},
{
path: '/login',
name: 'login',
component: () => import ('./views/Login.vue'),
meta: {
title: 'SRCT Bookshare - Login',
},
}
],
});
import Vue from 'vue';
import Vuex, { StoreOptions } from 'vuex';
import { RootState } from './types';
import { profile } from './profile/index';
Vue.use(Vuex);
const store: StoreOptions<RootState> = {
state: {
version: '1.0.0', // a simple property
},
modules: {
profile,
}
};
export default new Vuex.Store<RootState>(store);
\ No newline at end of file
export interface RootState {
version: string;
}
\ No newline at end of file
......@@ -97,6 +97,7 @@
max-rows="6"
/>
</b-form-group>
<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
<div class="text-center">
<b-button class="mx-sm-1" type="submit" variant="primary" :disabled="$v.form.$invalid">Submit</b-button>
<b-button class="mx-sm-1" type="reset" variant="danger">Reset</b-button>
......@@ -159,33 +160,65 @@ export default class CreateListing extends Vue {
// });
// }
mounted() {
API.get("/bs").then(function (response) {
console.log(response.headers);
}).catch(function (error) {
const token = error.response.headers["x-csrf-token"];
if (error.response.headers["x-csrf-token"] != null) {
localStorage.setItem("csrf_token", token);
}
})
}
private onSubmit(evt: Event) {
evt.preventDefault();
console.log(fetch('https://localhost:8888/api/bs/api/listing', {
mode: "no-cors",
method: 'get',
}));
// fetch('https://localhost:8888/api/bs/api/listing', {
// mode: "cors",
// method: 'get',
// // body: JSON.stringify(this.form),
// // headers: {
// // "Origin": "https://localhost:8888",
// // }
// }).then(response => window.location.href = "https://localhost:8888/api/bs/api/login");
// .then(response => window.location.href = response.url);
// .then(response => console.log(response));
// API.interceptors.request.use(function (config:any) {
// // Do something before request is sent
// return config;
// }, function (error:any) {
// // Do something with request error
// return Promise.reject(error);
// });
// API.get('bs/api/listing', {
// // data: this.form,
// })
// API.get('bs/api/listing')
API.post('bs/api/listing', { //?ticket=' + localStorage.getItem('token'), {
firstName: "Khalid",
},
{
headers: {
'X-CSRF-TOKEN': localStorage.getItem('csrf_token'),
}
}).then(function(response) {console.log(response);})
// .then(function (this: CreateListing, response) {
// console.log(response.status);
// console.log(response.data);
// if (response.status == 200) {
// this.casLogin = response.data;
// }
// })
// .catch(function (this: CreateListing, error) {
// //handle error
// console.log(error.response);
// // console.log("hello");
// // if (error.response.status == 403) {
// // location.replace('https://localhost:8888/bs/api/listing');
// // this.login();
// console.log(response);
// // window.location.href = response.request.url;
// // if (response.status == 200) {
// // this.casLogin = response.data;
// // }
// });
// })
.catch(function (this: CreateListing, error) {
//handle error
console.log(error.response);
// console.log("hello");
if (error.response == undefined || error.response.status == 403) {
location.replace('https://localhost:9090/bs/api/listing');
// this.login();
}
});
}
private onReset(evt: Event) {
......
......@@ -48,13 +48,22 @@ import '@/components/icons/book';
import '@/components/icons/gift';
import '@/components/icons/eye';
import { Component, Vue } from 'vue-property-decorator';
import API from '../api';
@Component({
components: {
// NavigationBar,
},
})
export default class Home extends Vue {}
export default class Home extends Vue {
mounted() {
// if (this.$route.query.ticket != null) {
// var token = JSON.stringify(this.$route.query.ticket).slice(1,-1);
// localStorage.setItem('token', token);
// API.defaults.headers.common['ticket'] = token;
// }
}
}
</script>
<style scoped>
......
<template>
<div class="container">
<div v-if="profile.user">