[*] manage 2 wrappers+ 2 routeSet (1 for authed users, other for not authed users)
This commit is contained in:
parent
6ec30fa1e9
commit
d7677eacb5
|
@ -1,47 +0,0 @@
|
||||||
import {APIClient} from './lib/api-client'
|
|
||||||
import {GlobalStore} from './lib/gstore'
|
|
||||||
import VueRouter from 'vue-router'
|
|
||||||
import routes from './routes'
|
|
||||||
import {PopupController} from './lib/popup-controller'
|
|
||||||
import {ContentController} from './lib/content-controller'
|
|
||||||
import {RoomController} from './lib/room-controller'
|
|
||||||
import {ChannelController} from './lib/channel-controller'
|
|
||||||
|
|
||||||
import XHRClientDriver from './lib/client/xhr.js'
|
|
||||||
import WebSocketClientDriver from './lib/client/ws.js'
|
|
||||||
|
|
||||||
|
|
||||||
window.gs = new GlobalStore();
|
|
||||||
window.api = new APIClient('localhost', null, false);
|
|
||||||
window.xhrcd = XHRClientDriver;
|
|
||||||
window.wscd = WebSocketClientDriver;
|
|
||||||
|
|
||||||
/* (1) Global data
|
|
||||||
---------------------------------------------------------*/
|
|
||||||
/* (1) Get Full URI */
|
|
||||||
gs.set('URI', document.URL.replace(/^(?:[^\/]+\/\/|[^\/]+\/)/, '').split('/').filter(function(v,i){ return !!i && v.length; }));
|
|
||||||
|
|
||||||
/* (2) Store routes */
|
|
||||||
gs.set('routes', routes[0]);
|
|
||||||
|
|
||||||
/* (3) Init. vue router */
|
|
||||||
gs.set('router', new VueRouter({
|
|
||||||
routes: gs.get.routes
|
|
||||||
}));
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* (2) Main components
|
|
||||||
---------------------------------------------------------*/
|
|
||||||
/* (1) Initialize popup management */
|
|
||||||
gs.set('popup', new PopupController());
|
|
||||||
|
|
||||||
/* (2) Initialize content management */
|
|
||||||
gs.set('content', new ContentController());
|
|
||||||
|
|
||||||
/* (3) Initialize rooms & room menu */
|
|
||||||
gs.set('room', new RoomController());
|
|
||||||
|
|
||||||
/* (4) Initialize channels & channel menu */
|
|
||||||
gs.set('channel', new ChannelController());
|
|
|
@ -1,3 +1,5 @@
|
||||||
|
import LocalStorageInterface from './local-storage-interface'
|
||||||
|
|
||||||
export default class Authentication{
|
export default class Authentication{
|
||||||
|
|
||||||
|
|
||||||
|
@ -7,11 +9,21 @@ export default class Authentication{
|
||||||
---------------------------------------------------------*/
|
---------------------------------------------------------*/
|
||||||
constructor(){
|
constructor(){
|
||||||
|
|
||||||
/* (1) Default attributes */
|
/* (1) Default localStorage Interface */
|
||||||
this._authkey = 'auth.default';
|
this.lsi = new LocalStorageInterface('__auth__', 5*60);
|
||||||
|
|
||||||
|
/* (2) Update token */
|
||||||
|
if( this.token !== null )
|
||||||
|
this.lsi.push('token', this.token);
|
||||||
|
|
||||||
/* (2) Section Title */
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* (2) TOKEN facade
|
||||||
|
*
|
||||||
|
---------------------------------------------------------*/
|
||||||
|
get token(){ return this.lsi.fetch('token'); }
|
||||||
|
set token(_token){ return this.lsi.push('token', _token); }
|
||||||
|
|
||||||
}
|
}
|
|
@ -5,13 +5,15 @@ export default class LocalStorageInterface{
|
||||||
*
|
*
|
||||||
* @_prefix<String> localStorage Interface Prefix (prefix)
|
* @_prefix<String> localStorage Interface Prefix (prefix)
|
||||||
* @_ttl<int> Seconds default valid time for stored data
|
* @_ttl<int> Seconds default valid time for stored data
|
||||||
|
* @_session<bool> Whether to use sessionStorage (default is localStorage)
|
||||||
*
|
*
|
||||||
---------------------------------------------------------*/
|
---------------------------------------------------------*/
|
||||||
constructor(_prefix, _ttl){
|
constructor(_prefix, _ttl, _session=false){
|
||||||
|
|
||||||
/* (1) Initialise private attributes */
|
/* (1) Initialise private attributes */
|
||||||
this._prefix = 'root';
|
this._prefix = 'root';
|
||||||
this._ttl = null;
|
this._ttl = null;
|
||||||
|
this._driver = !!_session ? sessionStorage : localStorage;
|
||||||
|
|
||||||
/* (2) Initialise public attributes */
|
/* (2) Initialise public attributes */
|
||||||
this.keys = [];
|
this.keys = [];
|
||||||
|
@ -31,13 +33,13 @@ export default class LocalStorageInterface{
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* (1) Synchronise keys from localStorage
|
/* (1) Synchronise keys from this._driver
|
||||||
*
|
*
|
||||||
---------------------------------------------------------*/
|
---------------------------------------------------------*/
|
||||||
synchronise(){
|
synchronise(){
|
||||||
|
|
||||||
// 1. Get localStorage key list
|
// 1. Get this._driver key list
|
||||||
let keys = Object.keys(localStorage);
|
let keys = Object.keys(this._driver);
|
||||||
|
|
||||||
// 2. Local copy of prefix
|
// 2. Local copy of prefix
|
||||||
let prefix = `${this._prefix}.`;
|
let prefix = `${this._prefix}.`;
|
||||||
|
@ -71,19 +73,19 @@ export default class LocalStorageInterface{
|
||||||
return false;
|
return false;
|
||||||
|
|
||||||
/* (2) Default value for _ttl */
|
/* (2) Default value for _ttl */
|
||||||
_ttl = isNaN(_ttl) ? this._ttl : _ttl;
|
let ttl = isNaN(_ttl) || _ttl === null ? this._ttl : parseInt(_ttl);
|
||||||
|
|
||||||
|
|
||||||
/* (2) Store data
|
/* (2) Store data
|
||||||
---------------------------------------------------------*/
|
---------------------------------------------------------*/
|
||||||
/* (1) Build storage object */
|
/* (1) Build storage object */
|
||||||
let storage_object = {
|
let storage_object = {
|
||||||
expires: _ttl ? new Date().getTime() + _ttl*1000 : null,
|
expires: ttl ? new Date().getTime() + ttl*1000 : null,
|
||||||
data: _data
|
data: _data
|
||||||
};
|
};
|
||||||
|
|
||||||
/* (2) Store storage object */
|
/* (2) Store storage object */
|
||||||
localStorage.setItem(`${this._prefix}.${_name}`, JSON.stringify(storage_object));
|
this._driver.setItem(`${this._prefix}.${_name}`, JSON.stringify(storage_object));
|
||||||
|
|
||||||
/* (3) Synchronize keys */
|
/* (3) Synchronize keys */
|
||||||
this.keys.push(_name);
|
this.keys.push(_name);
|
||||||
|
@ -119,7 +121,7 @@ export default class LocalStorageInterface{
|
||||||
/* (2) Fetch data
|
/* (2) Fetch data
|
||||||
---------------------------------------------------------*/
|
---------------------------------------------------------*/
|
||||||
/* (1) Try to get data */
|
/* (1) Try to get data */
|
||||||
let fetched = localStorage.getItem(`${this._prefix}.${_name}`);
|
let fetched = this._driver.getItem(`${this._prefix}.${_name}`);
|
||||||
|
|
||||||
/* (2) Try to parse */
|
/* (2) Try to parse */
|
||||||
try{
|
try{
|
||||||
|
@ -133,7 +135,7 @@ export default class LocalStorageInterface{
|
||||||
}
|
}
|
||||||
|
|
||||||
/* (4) If not valid anymore -> delete + return NULL */
|
/* (4) If not valid anymore -> delete + return NULL */
|
||||||
if( storage_object.expires < new Date().getTime() ){
|
if( !isNaN(storage_object.expires) && storage_object.expires < new Date().getTime() ){
|
||||||
this.pop(_name);
|
this.pop(_name);
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
@ -162,8 +164,8 @@ export default class LocalStorageInterface{
|
||||||
if( this.keys.indexOf(_name) < 0 )
|
if( this.keys.indexOf(_name) < 0 )
|
||||||
return null;
|
return null;
|
||||||
|
|
||||||
/* (3) Remove from localStorage */
|
/* (3) Remove from this._driver */
|
||||||
localStorage.removeItem(`${this._prefix}.${_name}`);
|
this._driver.removeItem(`${this._prefix}.${_name}`);
|
||||||
|
|
||||||
/* (4) Update keys */
|
/* (4) Update keys */
|
||||||
this.keys = this.keys.filter( (k) => (k!==_name) );
|
this.keys = this.keys.filter( (k) => (k!==_name) );
|
||||||
|
|
|
@ -1,54 +1,25 @@
|
||||||
/* (1) Imports
|
import Vue from 'vue'
|
||||||
---------------------------------------------------------*/
|
import VueRouter from 'vue-router'
|
||||||
/* (1) NPM libs */
|
import auth_wrapper from './vue/auth/wrapper.vue'
|
||||||
import Vue from 'vue'
|
import noauth_wrapper from './vue/noauth/wrapper.vue'
|
||||||
import VueRouter from 'vue-router'
|
|
||||||
import routes from './routes'
|
|
||||||
|
|
||||||
/* (2) Vues */
|
|
||||||
import wrapper from './vue/wrapper.vue'
|
|
||||||
|
|
||||||
/* (3) Data */
|
|
||||||
require('./common.js');
|
|
||||||
|
|
||||||
|
|
||||||
|
/* (1) Setup Vue, VueRouter, Authentication lib */
|
||||||
|
require('./setup.js');
|
||||||
|
/* (2) Get appropriate page data */
|
||||||
|
let auth_folder = (gs.get.auth) ? 'auth' : 'noauth';
|
||||||
|
let page_file = gs.get.router.history.current.name || gs.get.routes[auth_folder][0].name;
|
||||||
|
|
||||||
|
/* (3) Load page script */
|
||||||
|
require(`./page/${auth_folder}/${page_file}.js`);
|
||||||
|
|
||||||
/* (2) Initialisation
|
/* (4) Select appropriate wrapper */
|
||||||
---------------------------------------------------------*/
|
const wrapper = (gs.get.auth) ? auth_wrapper : noauth_wrapper;
|
||||||
/* (1) Render view */
|
|
||||||
|
/* (5) Render view */
|
||||||
Vue.use(VueRouter);
|
Vue.use(VueRouter);
|
||||||
new Vue({
|
new Vue({
|
||||||
el: '#vue',
|
el: '#vue',
|
||||||
router: gs.get.router,
|
router: gs.get.router,
|
||||||
render(h){ return h(wrapper); }
|
render(h){ return h(wrapper); }
|
||||||
})
|
})
|
||||||
|
|
||||||
/* (2) Store route params */
|
|
||||||
window.initial_link = gs.get.router.history.current.params.link;
|
|
||||||
console.log(`[channel.URL] ${initial_link}`);
|
|
||||||
|
|
||||||
/* (3) Channel data gathering
|
|
||||||
---------------------------------------------------------*/
|
|
||||||
/* (1) Fetch channel data */
|
|
||||||
setTimeout(() => {
|
|
||||||
|
|
||||||
/* (2) Fetch data */
|
|
||||||
gs.get.channel.dump( require('./mockup/api-channels.json') );
|
|
||||||
|
|
||||||
/* (3) Find if @link matches */
|
|
||||||
var redirect_id = null;
|
|
||||||
for( let c of gs.get.channel.list ){
|
|
||||||
|
|
||||||
if( c.link === window.initial_link ){
|
|
||||||
redirect_id = c.id;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/* (4) Emulate navigatation from URL */
|
|
||||||
console.log(`[restore.channel] ${redirect_id}`);
|
|
||||||
gs.get.channel.nav(redirect_id);
|
|
||||||
|
|
||||||
}, 500);
|
|
|
@ -0,0 +1,50 @@
|
||||||
|
import PopupController from '../../lib/popup-controller'
|
||||||
|
import ContentController from '../../lib/content-controller'
|
||||||
|
import RoomController from '../../lib/room-controller'
|
||||||
|
import ChannelController from '../../lib/channel-controller'
|
||||||
|
|
||||||
|
|
||||||
|
/* (1) Channel data gathering
|
||||||
|
---------------------------------------------------------*/
|
||||||
|
/* (1) Store route params */
|
||||||
|
window.initial_link = gs.get.router.history.current.params.link;
|
||||||
|
console.log(`[channel.URL] ${initial_link}`);
|
||||||
|
|
||||||
|
/* (2) Fetch channel data */
|
||||||
|
setTimeout(() => {
|
||||||
|
|
||||||
|
/* (3) Fetch data */
|
||||||
|
gs.get.channel.dump( require('../../mockup/api-channels.json') );
|
||||||
|
|
||||||
|
/* (4) Find if @link matches */
|
||||||
|
var redirect_id = null;
|
||||||
|
for( let c of gs.get.channel.list ){
|
||||||
|
|
||||||
|
if( c.link === window.initial_link ){
|
||||||
|
redirect_id = c.id;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* (4) Emulate navigatation from URL */
|
||||||
|
console.log(`[restore.channel] ${redirect_id}`);
|
||||||
|
gs.get.channel.nav(redirect_id);
|
||||||
|
|
||||||
|
}, 500);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* (2) Main components
|
||||||
|
---------------------------------------------------------*/
|
||||||
|
/* (1) Initialize popup management */
|
||||||
|
gs.set('popup', new PopupController());
|
||||||
|
|
||||||
|
/* (2) Initialize content management */
|
||||||
|
gs.set('content', new ContentController());
|
||||||
|
|
||||||
|
/* (3) Initialize rooms & room menu */
|
||||||
|
gs.set('room', new RoomController());
|
||||||
|
|
||||||
|
/* (4) Initialize channels & channel menu */
|
||||||
|
gs.set('channel', new ChannelController());
|
|
@ -1,35 +0,0 @@
|
||||||
/* (1) Imports
|
|
||||||
---------------------------------------------------------*/
|
|
||||||
/* (1) NPM libs */
|
|
||||||
import Vue from 'vue'
|
|
||||||
import VueRouter from 'vue-router'
|
|
||||||
import routes from '../routes/home'
|
|
||||||
|
|
||||||
/* (2) Vues */
|
|
||||||
import wrapper_vue from '../vue/wrapper.vue'
|
|
||||||
|
|
||||||
/* (3) Data */
|
|
||||||
require('../data/common');
|
|
||||||
require('../data/home');
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* (2) Initialisation
|
|
||||||
---------------------------------------------------------*/
|
|
||||||
/* (1) Init Router */
|
|
||||||
const router = new VueRouter({
|
|
||||||
mode: 'history',
|
|
||||||
routes: require('./routes.js')
|
|
||||||
});
|
|
||||||
|
|
||||||
/* (2) Store router in gstore */
|
|
||||||
gstore.add('router', router);
|
|
||||||
|
|
||||||
/* (3) Render view */
|
|
||||||
Vue.use(VueRouter);
|
|
||||||
new Vue({
|
|
||||||
el: '#WRAPPER',
|
|
||||||
router,
|
|
||||||
render: h => h(wrapper_vue)
|
|
||||||
});
|
|
|
@ -0,0 +1 @@
|
||||||
|
|
|
@ -1,11 +1,29 @@
|
||||||
export default{ 0: [
|
export default {
|
||||||
|
|
||||||
{
|
auth: [
|
||||||
path: '/channel/:link',
|
|
||||||
component: require('./vue/channel.vue').default
|
|
||||||
}, {
|
|
||||||
path: '*',
|
|
||||||
redirect: '/channel/me'
|
|
||||||
}
|
|
||||||
|
|
||||||
] }
|
{
|
||||||
|
name: 'channel',
|
||||||
|
path: '/channel/:link',
|
||||||
|
component: require('./vue/auth/channel.vue').default
|
||||||
|
}, {
|
||||||
|
path: '*',
|
||||||
|
redirect: '/channel/me'
|
||||||
|
}
|
||||||
|
|
||||||
|
],
|
||||||
|
|
||||||
|
noauth: [
|
||||||
|
|
||||||
|
{
|
||||||
|
name: 'login',
|
||||||
|
path: '/login',
|
||||||
|
component: require('./vue/noauth/login.vue').default
|
||||||
|
}, {
|
||||||
|
path: '*',
|
||||||
|
redirect: '/login'
|
||||||
|
}
|
||||||
|
|
||||||
|
]
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,45 @@
|
||||||
|
/* (1) VueJS data */
|
||||||
|
import VueRouter from 'vue-router'
|
||||||
|
import GlobalStore from './lib/gstore'
|
||||||
|
import routes from './routes'
|
||||||
|
|
||||||
|
/* (2) Custom libs */
|
||||||
|
import Authentication from './lib/authentication.js'
|
||||||
|
import XHRClientDriver from './lib/client/xhr.js'
|
||||||
|
import WebSocketClientDriver from './lib/client/ws.js'
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* (1) Custom lib accessors
|
||||||
|
---------------------------------------------------------*/
|
||||||
|
window.gs = new GlobalStore();
|
||||||
|
window.xhrcd = XHRClientDriver;
|
||||||
|
window.wscd = WebSocketClientDriver;
|
||||||
|
window.auth = new Authentication();
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* (2) Global data
|
||||||
|
---------------------------------------------------------*/
|
||||||
|
/* (1) Get Full URI */
|
||||||
|
gs.set('URI', document.URL.replace(/^(?:[^\/]+\/\/|[^\/]+\/)/, '').split('/').filter(function(v,i){ return !!i && v.length; }));
|
||||||
|
|
||||||
|
/* (2) Store routes */
|
||||||
|
gs.set('routes', routes);
|
||||||
|
|
||||||
|
/* (3) Store if authenticated */
|
||||||
|
gs.set('auth', auth.token !== null);
|
||||||
|
|
||||||
|
/* (4) Init. vue router */
|
||||||
|
gs.set('router', new VueRouter({
|
||||||
|
routes: gs.get.auth ? gs.get.routes['auth'] : gs.get.routes['noauth']
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,24 @@
|
||||||
|
<template>
|
||||||
|
|
||||||
|
<div class='container'>
|
||||||
|
|
||||||
|
<div class='header'>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class='body'>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template><script>
|
||||||
|
export default {
|
||||||
|
|
||||||
|
name: 'login-',
|
||||||
|
|
||||||
|
data(){ return { gs: gs.get }; }
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
|
@ -0,0 +1,23 @@
|
||||||
|
<template>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div id="WRAPPER">
|
||||||
|
|
||||||
|
<!-- Container -->
|
||||||
|
<router-view></router-view>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</template><script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
|
||||||
|
name: 'wrapper-',
|
||||||
|
|
||||||
|
data(){ return { gs: gs.get }; },
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
Loading…
Reference in New Issue