I am trying to solve this but I can't, I have a website built with Laravel and Vuejs:
This is my app.js
import 'bootstrap';
import './axios';
import Vue from 'vue';
import VueRouter from 'vue-router';
import store from './store';
import router from './router';
store.dispatch('checkAuth');
const app = new Vue({
el: '#app',
store ,
router
});
this is my router.js:
import VueRouter from 'vue-router';
import Login from './components/Login';
import Register from './components/Register';
import Main from './components/Main';
const checkLogin = (to, from, next) =>{
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!store.getters.isAuthenticated) {
next({name: 'login' })
} else {
next()
}
} else if (to.matched.some(record => record.meta.requiresVisitor)) {
if (store.getters.isAuthenticated) {
next({name: 'home' })
} else {
next()
}
} else {
next()
}
}
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/',
beforeEnter: checkLogin,
component: Main,
meta: { requiresAuth: true },
children : [
{
path: "",
name: "home",
component: PostsList
},
....
]
},
{
path: '/login',
beforeEnter: checkLogin,
component: Login,
name:'login',
meta: { requiresVisitor: true }
},
{
path: '/register',
beforeEnter: checkLogin,
component: Register,
name: 'register',
meta: { requiresVisitor: true }
}
]
});
and this is my store:
import Vue from 'vue';
const state = {
user: null,
isAuthenticated: false
};
const getters = {
isAuthenticated(state){
return state.isAuthenticated;
},
currentUser(state){
return state.user;
}
};
async login({commit, dispatch}, credentials) {
await axios.get('/sanctum/csrf-cookie');
const {data} = await axios.post("/login", credentials);
commit('setAuth', data);
},
async checkAuth({commit}) {
const {data} = await axios.get('/api/user');
commit('setAuth', data);
}
}
const mutations = {
setAuth(state, payload) {
state.user = payload.user;
state.isAuthenticated = Boolean(payload.user);
}
};
Then the problem arrives when I refresh the page, it calls the action:
store.dispatch('checkAuth');
then it should wait until the action is done because I did this in the action:
const {data} = await axios.get('/api/user');
But no, it doesn't wait because vue-router is executed and as the user state is not set yet , store.getters.isAuthenticated is false then it redirects to /login, then when I check the vue tools in the browser and see that the state was set correctly even the request to api/user returns the user correctly, Because before that I logged in a user, I need that vue-router waits until the vuex state is set. what can I do? Thank you.
I was able to solve this problem, but I don't know if this is the best way to do it:
in my app.js
Instead of this:
store.dispatch('checkAuth');
const app = new Vue({
el: '#app',
store ,
router
});
I did this:
const VueInstance = ()=>{
new Vue({
el: '#app',
store ,
router
});
}
store.dispatch('checkAuth').then(()=>{
VueInstance();
}).catch(()=>{
VueInstance();
});
Now it is working because the vuex action checkAuth returns a promise, so I needed to wait until it is completed, but, in case the action returns an error, because in the first load the user is not logged in, I must add a catch, because th Vue should be created whether the user is logged in or not. If someone have a better solution let me know. Thank you.
Related
My app is working normally. When I navigate to /login page, and hit login button then the login action is called, which is shown below in the code, user information is then stored in the store. But the problem is while accessing protected route, I've called beforeEnter function in the routes.js file where the user is redirected based on the authentication. So if I try to access /dashboard, initially the user is not authenticated. So, it redirects the user to the login page. Now after being redirected to the login page, if I enter all the credentials and press login button, again it calls login action as previously mentioned, but this time wherever it finds commit function to mutate the state, it says Error: [vuex] do not mutate vuex store state outside mutation handlers.. This error message is shown in the console only if I redirect to the login page from beforeEnter using next('/login') function and hit login button else the app is working perfectly.
user.js (user module in store)
const state = {
token: null,
user:{
username: null
}
}
const getters = {
authenticated(state){
return state.token && state.user.username && true
}
}
const mutations = {
login(state, payload){
state.user.username = payload.username
state.token = payload.token
}
}
const actions = {
login({commit}, payload){
commit('login', {...payload, token: "ja;lfjalf"})
}
}
export default {
namespaced: true,
getters,
mutations,
actions,
state
}
routes.js
import store from 'src/store'
const routes = [
{
path: '/',
component: () => import('layouts/MainLayout.vue'),
children: [
{ path: '', component: () => import('pages/Home.vue') },
{ path: '/login', component: () => import('pages/Login.vue') },
{
path: '/dashboard',
component: () => import('pages/Dashboard.vue'),
beforeEnter: (to, from, next) => {
// prints true if authenticated
console.log(store().getters['user/authenticated'])
if(store().getters['user/authenticated']){
return next()
}
next('login')
}
},
]
},
{
path: '/:catchAll(.*)*',
component: () => import('pages/Error404.vue')
}
]
export default routes
login.vue
<template>
<form #submit.prevent="login">
<input v-model="username" placeholder="Username" type="text"/>
<input v-model="password" placeholder="Password" type="text"/>
<button type="submit">Login</button>
</form>
</template>
<script>
import {mapActions} from 'vuex'
export default {
data(){
return{
username: "thomas",
password: "thomas"
}
},
methods:{
...mapActions({
signin: 'user/login'
}),
login(){
this.signin({
username: this.username,
password: this.password
})
}
}
}
</script>
src/
store/
index.js
import { store } from 'quasar/wrappers'
import { createStore } from 'vuex'
import user from './user'
export default store(function (/* { ssrContext } */) {
const Store = createStore({
modules: {
user
},
strict: process.env.DEBUGGING
})
return Store
})
Note: I updated post with minimun code
After authorization, I write the user type to the state, based on this type, I want to show / hide some routes.
src/store/index.js:
import Vue from "vue";
import Vuex from "vuex";
import getters from "./getters";
import user from "./modules/user";
Vue.use(Vuex);
const store = new Vuex.Store({
modules: { user },
getters
});
export default store;
src/store/getters.js:
const getters = {
token: state => state.user.token,
name: state => state.user.name,
type: state => state.user.type
};
export default getters;
src/router/index.js:
import Vue from "vue";
import Router from "vue-router";
import Layout from "#/layout";
Vue.use(Router);
export const constantRoutes = [
{
path: "/login",
component: () => import("#/views/Login"),
hidden: true
},
{
path: "/",
component: Layout,
redirect: "/dashboard",
children: [
{
path: "dashboard",
name: "Dashboard",
component: () => import("#/views/Dashboard"),
meta: { title: "routes.dashboard", icon: "el-icon-odometer" }
}
]
},
{
path: "/providers",
component: Layout,
redirect: "/providers/list",
name: "Providers",
meta: { title: "routes.providers", icon: "el-icon-suitcase-1" },
children: [
{
path: 'list',
name: "List",
component: () => import("#/views/providers/ProvidersList"),
meta: { title: "routes.providersList", icon: "el-icon-document" }
}
]
}
];
const createRouter = () =>
new Router({
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes
});
const router = createRouter();
export function resetRouter() {
const newRouter = createRouter();
router.matcher = newRouter.matcher;
}
export default router;
Authorization control in a separate file src/permission.js:
import router from "./router";
import store from "./store";
import { Message } from "element-ui";
import NProgress from "nprogress";
import "nprogress/nprogress.css";
import { getToken } from "#/utils/auth";
import getPageTitle from "#/utils/get-page-title";
NProgress.configure({ showSpinner: false });
const whiteList = ["/login"];
router.beforeEach(async (to, from, next) => {
NProgress.start();
document.title = getPageTitle(to.meta.title);
const hasToken = getToken();
if (hasToken) {
if (to.path === "/login") {
next({ path: "/" });
NProgress.done();
} else {
const hasGetUserInfo = store.getters.name;
if (hasGetUserInfo) {
next();
} else {
try {
await store.dispatch("user/getInfo");
next();
} catch (error) {
await store.dispatch("user/resetToken");
Message.error(error || "Has Error");
next(`/login?redirect=${to.path}`);
NProgress.done();
}
}
}
} else {
if (whiteList.indexOf(to.path) !== -1) {
next();
} else {
next(`/login?redirect=${to.path}`);
NProgress.done();
}
}
});
router.afterEach(() => {
NProgress.done();
});
As you can see all the code is a collection of copy-paste solutions found somewhere and now I'm completely stuck. How can I hide and deny access to certain routes for users with different state.user.type?
Converting my comment to answer.
Perhaps it will be easier (for you) to use an existing (and tested) solution - something like Vue-ACL or even more advanced.
Background
I have created a router/index.js file and created a router for my Vue application. I added VueX to the application and am using it throughout some of the components. I would like to use a getter inside of router to check the permissions of a user logged in but I am having trouble importing VueX correctly.
Problem
When I important my store and module to the router file index.js, I am trying to use this.$store.registerModule(). When I try this I get undefined on this.$store.
Example
import Vue from 'vue';
import Router from 'vue-router';
import { mapGetters } from 'vuex';
import authentication from '../store/modules/authentication';
import store from '../store';
if (!(store && store.state && store.state[name])) {
this.$store.registerModule(name, authentication);
}
This logic works in any Vue component I use it in but it does not work in the router file.
My goal is to be able to check state in VueX like this,
const getters = {
...mapGetters('authentication', ['IS_LOGGED_IN'])
};
const router = new Router({
{
path: '/admin',
name: 'Admin',
component: Admin,
meta: {
requiresAuth: true,
isAdmin: true
}
]
});
router.beforeEach((to, from, next) => {
if (
to.matched.some(record => record.meta.requiresAuth) &&
to.matched.some(record => record.meta.isAdmin)
) {
if (!getters.IS_LOGGED_IN && !getters.IS_ADMIN) {
next({
path: '/login',
params: { nextUrl: to.fullPath }
});
} else {
next();
}
} else if (to.matched.some(record => record.meta.requiresAuth)) {
if (!getters.IS_LOGGED_IN) {
next({
path: '/login',
params: { nextUrl: to.fullPath }
});
} else {
next();
}
} else if (to.matched.some(record => record.meta.guest)) {
next();
} else {
next();
}
});
export default router;
Question
What is the correct way to use VueX with Vue Router?
Things I tried
I tried using,
store.registerModule(name, authentication);
This throws undefined on, registerModule
I'm using Vuex in my project with vue.js 2.0. My app.js looks like this:
import VueRouter from 'vue-router';
import Login from './components/Login.vue';
import Home from './components/Home.vue';
import VModal from 'vue-js-modal';
import Vuex from 'vuex';
import store from './store';
window.Vue = require('vue');
Vue.use(VueRouter);
Vue.use(VModal);
Vue.use(Vuex);
window.Bus = new Vue();
const routes = [
{ path: '/', component: Login, name: 'login' },
{ path: '/home', component: Home, name: 'home', beforeEnter: requireAuth },
];
const router = new VueRouter({
routes // short for `routes: routes`
});
const app = new Vue({
router,
store
}).$mount('#app');
function requireAuth() {
return this.$store.state.isLoggedIn;
}
My store looks like this:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const LOGIN = "LOGIN";
const LOGIN_SUCCESS = "LOGIN_SUCCESS";
const LOGOUT = "LOGOUT";
const store = () => {
return new Vuex.Store({
state: {
isLoggedIn: !!localStorage.getItem("token"),
user: null
},
mutations: {
[LOGIN] (state) {
state.pending = true;
},
[LOGIN_SUCCESS] (state) {
state.isLoggedIn = true;
state.pending = false;
},
[LOGOUT](state) {
state.isLoggedIn = false;
}
},
actions: {
login({state, commit, rootState}) {
commit(LOGIN_SUCCESS);
},
setUser({state, commit, rootState}, user) {
//todo
}
}
});
}
export default store;
However when I try to access a value from the state in my requireAuth function:
return this.$store.state.isLoggedIn;
or
return this.store.state.isLoggedIn;
I get the error:
Cannot read property '$store' of undefined
What could be wrong here?
--EDIT--
When I console.log(store); I see:
store() {
var _mutations;
return new __WEBPACK_IMPORTED_MODULE_1_vuex__["a" /* default */].Store({
state: {
isLoggedIn: !!localStorage.getItem("token"),
You have the function declared in the global scope like this:
function requireAuth() {
return this.$store.state.isLoggedIn;
}
So when you call this function this is bound by default to global object. But since ES6 this will be undefined instead of the global object. So you get the error cannot read $store of undefined
Since you are importing the store in app.js you can directly use:
function requireAuth() {
return store.state.isLoggedIn;
}
EDIT
export the created store instance itself, not a function that returns a store instance as follows:
store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const LOGIN = "LOGIN";
const LOGIN_SUCCESS = "LOGIN_SUCCESS";
const LOGOUT = "LOGOUT";
const store = new Vuex.Store({
state: {
isLoggedIn: !!localStorage.getItem("token"),
user: null
},
mutations: {
[LOGIN] (state) {
state.pending = true;
},
[LOGIN_SUCCESS] (state) {
state.isLoggedIn = true;
state.pending = false;
},
[LOGOUT](state) {
state.isLoggedIn = false;
}
},
actions: {
login({state, commit, rootState}) {
commit(LOGIN_SUCCESS);
},
setUser({state, commit, rootState}, user) {
//todo
}
}
});
export default store;
The requireAuth function should be:
function requireAuth() {
return store.state.isLoggedIn;
}
requireAuth is just a function defined in your app.js and this.$store is how you would refer to the store inside a Vue method. Instead, you can just refer to it in the function as store.
I have created login page. router intercepting the request and validates the user is authenticated or not . store is maintaining the user is logged in or not.
while debugging i am getting in auth.js
"store is not defined"
I also tried relative path instead of # in imports.
router code snippet
import auth from '#/services/auth';
...
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!auth.loggedIn()) {
next({
path: '/login',
});
} else {
next();
}
} else {
next();
}
});
auth.js is like service which will interact with store and maintain state .
import Vue from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';
import store from '#/store/UserStore';
Vue.use(VueAxios, axios);
export default {
login(credentials) {
return new Promise((resolve, reject) => {
Vue.axios.post('/api/authenticate', credentials).then((response) => {
localStorage.setItem('token', response.body.token);
store.commit('LOGIN_USER');
resolve();
}).catch((error) => {
store.commit('LOGOUT_USER');
reject(error);
});
});
},
isUserLoggedIn() {
return store.isUserLoggedIn();
},
};
here is my store to
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
strict: process.env.NODE_ENV !== 'production',
state: {
isLogged: !localStorage.getItem('token'),
user: {},
},
actions: {
},
mutations: {
/* eslint-disable no-param-reassign */
LOGIN_USER(state) {
state.isLogged = true;
},
/* eslint-disable no-param-reassign */
LOGOUT_USER(state) {
state.isLogged = false;
},
},
getters: {
isUserLoggedIn: state => state.isLogged,
},
modules: {
},
});
change export type in UserStore like this:
line
export default new Vuex.Store({
replace with
export const store = new Vuex.Store({