Skip to content

Instantly share code, notes, and snippets.

@rico rico/Login.vue
Last active Feb 11, 2018

Embed
What would you like to do?
vue-authenticate #110
// File: store/modules/auth.js
import authProvider from '../../providers/authenticate'
import http from '../../providers/http'
// You can use it as state property
const state = {
isAuthenticated: false,
user: null
};
const getters = {
isAuthenticated () {
return authProvider.isAuthenticated()
},
user () {
return state.user
}
};
const mutations = {
isAuthenticated (state, payload) {
state.isAuthenticated = payload.isAuthenticated
},
user (state, payload) {
state.user = payload;
}
};
const actions = {
// Perform VueAuthenticate login using Vuex actions
login (context, payload) {
return new Promise((resolve, reject) => {
authProvider.login(payload.credentials).then((response) => {
context.commit('isAuthenticated', {
isAuthenticated: authProvider.isAuthenticated()
});
http.get('/auth/user')
.then(function (response) {
context.commit('user', response.data);
resolve();
});
})
.catch((err) => {
reject(err);
});
});
}
};
export default {
state,
getters,
actions,
mutations
}
// File: providers/authenticate.js
import Vue from 'vue'
import { VueAuthenticate } from 'vue-authenticate'
import http from "./http";
export default new VueAuthenticate(Vue.prototype.$http, {
loginUrl: 'auth/user/login',
tokenName: 'access_token'
});
// File: providers/authorize.js
import Vue from "vue";
import auth from './authenticate'
import { VueAuthorize } from 'vue-authorize'
import IsAuthorizedComponent from "vue-authorize/src/component";
import IsAuthorizedDirective from "vue-authorize/src/directive";
const authorize = new VueAuthorize(auth, {
roles: {
user: {
handler: function () {
console.log('authorize.js 10 => user');
return this.$auth.isAuthorized()
},
permissions: []
},
guest: {
handler: function () {
console.log('authorize.js 19 => guest');
return !this.$auth.isAuthorized()
},
permissions: []
}
},
permissions: {}
});
Vue.directive('isAuthorized', IsAuthorizedDirective);
Vue.component('isAuthorized', IsAuthorizedComponent);
Object.defineProperties(Vue.prototype, {
$authorize: {
get() {
return authorize
}
}
});
export default authorize;
// File: providers/http.js
import Vue from "vue";
import axios from "axios/index";
import VueAxios from "vue-axios";
Vue.use(VueAxios, axios);
Vue.axios.defaults.baseURL = 'http://local.test';
export default Vue.axios;
// File: store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
import auth from './modules/auth'
export default new Vuex.Store({
modules: {
auth
},
});
// Component: Login.vue
data: () => ({
credentials: {
username: '',
password: '',
},
errors: {},
loading:false
}),
methods : {
login: function () {
this.errors = {};
this.loading = true;
this.$store.dispatch('login', {credentials: this.credentials})
.then(() => {
this.loading = false;
this.$router.push('/');
})
.catch((e) => {
if (e.response.status == 422) {
this.errors = e.response.data.errors;
} else if (e.response.status == 401) {
this.errors.message = 'Kein Benutzer mit diesen Angaben gefunden.'
}
this.loading = false;
});
}
}
// File: router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router';
import Login from '../pages/Login';
import Dashboard from '../pages/Dashboard';
import '../providers/authorize';
Vue.use(VueRouter);
const routes = [
{
path: '/',
component: Dashboard,
meta: {
permissions: {
roles: ['user'],
redirectTo: '/login'
}
}
},
{
path: '/login',
component: Login,
meta: {
permissions: {
roles: ['guest'],
redirectTo: '/'
}
}
},
];
export default new VueRouter({
routes // short for `routes: routes`
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.