SPA:如何在使用Vuejs刷新页面时避免登录页面出现。

huangapple go评论69阅读模式
英文:

SPA : how to avoid login page appearing when refresh page using Vuejs

问题

我遵循以下指南,正如您将看到的那样,当我在加载 Spinner 时刷新页面时,我的当前路由将是登录页面,加载 Spinner 完成后,仪表板页面再次显示,我该如何解决这个问题。
首次,我没有在中间件中检查存储,这意味着当我刷新页面时,系统会注销。

route.js

const routes = [
    {
        path: '/login',
        name: 'login',
        component: Login,
        meta: {
            middleware: [
                guest
            ]
        }
    },
    {
        path: '/dashboard',
        name: 'dashboard',
        component: () =>
            import(/* webpackChunkName: "dashboard" */ '@/views/admin/Dashboard.vue'),
        meta: {
            middleware: [
                auth
            ]
        }
    }
}

middleware auth.js


export default function auth ({ next, store }){
    if(!store.getters.auth){
        store.dispatch('isLogin');
    }

    if(!store.getters.auth){
        return next({
            path: '/login',
        });
    }
    
   
    return next()
}

middleware guest.js


export default function guest ({ next, store}){
    if(!store.getters.auth){
        store.dispatch('isLogin');
    }

    if(store.getters.auth){
        return next({
            path: '/dashboard',
        })
    }

   
    return next()
}

index.js


import routes from "./routes";
const router = new VueRouter({
    mode: 'history',
    linkActiveClass: 'active',
    base: process.env.BASE_URL,
    routes
});


router.beforeEach((to, from, next) => {
    if (!to.meta.middleware) {
        return next()
    }
    const middleware = to.meta.middleware
    const context = {
        to,
        from,
        next,
        store
    }
    return middleware[0]({
        ...context
    })
});
英文:

I follow the below guide as you will see so when I refresh the page while loading Spiner running my current router will be login page and after loading Spiner finished then the dashboard page came back again, how can I solve this problem.
For the first time, I didn't use check the store inside a middleware that means when I refresh a page the system will logout.

route.js

const routes = [
    {
        path: '/login',
        name: 'login',
        component: Login,
        meta: {
            middleware: [
                guest
            ]
        }
    },
    {
        path: '/dashboard',
        name: 'dashboard',
        component: () =>
            import ( /* webpackChunkName: "dashboard" */ '@/views/admin/Dashboard.vue'),
        meta: {
            middleware: [
                auth
            ]
        }
    }
}

middleware auth.js


export default function auth ({ next, store }){
    if(!store.getters.auth){
        store.dispatch('isLogin');
    }

    if(!store.getters.auth){
        return next({
            // name: 'login'
            path: '/login',
        });
    }
    
   
    return next()
}

middleware guest.js


export default function guest ({ next, store}){
    if(!store.getters.auth){
        store.dispatch('isLogin');
    }

    if(store.getters.auth){
        return next({
        //    name: 'dashboard'
            path: '/dashboard',
        })
    }

   
    return next()
}

index.js


import routes from "./routes";
const router = new VueRouter({
    mode: 'history',
    linkActiveClass: 'active',
    base: process.env.BASE_URL,
    routes
});


router.beforeEach((to, from, next) => {
    // console.log("to, from, next", to, from, next, to.meta.middleware);

    if (!to.meta.middleware) {
        return next()
    }
    const middleware = to.meta.middleware
// console.log("middleware", middleware);
    const context = {
        to,
        from,
        next,
        store
    }
    return middleware[0]({
        ...context
    })
});

答案1

得分: 0

Vuex actions(如您的isLogin操作)是异步的,所以在调度isLogin之后,您检查store.getters.auth时用户可能尚未登录。

您可以使用"then"语法来处理承诺,以确保在检查用户是否已登录之前已完成您的操作:

export default async function auth({ next, store }) {
    if (!store.getters.auth) {
        await store.dispatch("isLogin");
        if (!store.getters.auth) {
            return next({
                path: "/login"
            });
        }
    }
}

然后使用await关键字调用中间件:

await middleware[0]({
    ...context
});
英文:

Vuex actions (like your isLogin action) are asynchronous so your user might not be logged in by the time you're checking store.getters.auth after you've dispatched isLogin.

You could use the "then" syntax for promises to ensure that your action has been completed before checking if the user is logged in:

export default async function auth({ next, store }) {
    if (!store.getters.auth) {
        store.dispatch("isLogin").then(_ => {
            if (!store.getters.auth) {
                return next({
                    path: "/login"
                });
            }

            return next();
        });
    }
}

And then call the middleware using the await keyword:

await middleware[0]({
        ...context
});

huangapple
  • 本文由 发表于 2020年1月6日 21:46:33
  • 转载请务必保留本文链接:https://go.coder-hub.com/59613254.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定