Skip to content

Instantly share code, notes, and snippets.

@elithecho
Last active November 1, 2017 16:52
Show Gist options
  • Save elithecho/7f43cd7fd303ca0d1b7bc0b4b7560d64 to your computer and use it in GitHub Desktop.
Save elithecho/7f43cd7fd303ca0d1b7bc0b4b7560d64 to your computer and use it in GitHub Desktop.
Vue templates
// Creates a new axios instance for config
import axios from 'axios'
const instance = axios.create({
baseURL: 'http://localhost:3000',
timeout: 1000,
})
export default instance
import Vue from 'vue'
import { sync } from 'vuex-router-sync'
import axios from './http-base'
import VueAxios from 'vue-axios'
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = false
Vue.use(VueAxios, axios)
// redirect user if router meta requiresAuth == true
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
next({
path: '/login',
query: { redirect: to.fullPath }
})
} else {
next()
}
})
// Syncs router to store
sync(store, router)
// intercepts any 401 (Unauthorized) and redirects to root
// you can change router.push to login route
axios.interceptors.response.use(function (response) {
return response;
}, function (error) {
if (error.response.status == 401) {
router.push('/')
}
return Promise.reject(error);
});
// retrieves user from jwt token when app opens
if (window.localStorage) {
let localUser = window.localStorage.getItem('user') || 'null'
if (localUser && store.state.user !== localUser) {
store.commit('SET_USER', localUser)
store.commit('SET_USER_TOKEN', window.localStorage.getItem('jwt_token'))
}
}
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App }
})
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Login from '@/components/views/Login'
import Dashboard from '@/components/views/Dashboard'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'root',
component: Home
},
{
path: '/login',
name: 'login',
component: Login
},
{
path: '/dashboard',
name: 'dashboard',
component: Dashboard,
meta: { requiresAuth: true }
}
]
})
import jwt_decode from 'jwt-decode'
export default {
LOGIN ({ commit }, token) {
const user = jwt_decode(token)
window.localStorage.setItem('jwt_token', token)
window.localStorage.setItem('user', user)
commit('SET_USER_TOKEN', token)
commit('SET_USER', user)
}
}
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
Vue.use(Vuex)
export default new Vuex.Store({
state,
mutations,
actions,
})
import axios from '@/api/http-base'
export default {
SET_USER_TOKEN (state, token) {
// Sets axios headers when token is set
axios.defaults.headers.common.Authorization = token ? `JWT ${token}` : ''
state.jwt_token = token
},
SET_USER (state, user) {
state.user = user
}
}
export default {
jwt_token: '',
user: {},
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment