时间戳

首页 > 解决方案 > 带有 vuetify 的登录页面

vue.js - 带有 vuetify 的登录页面

问题描述

我想创建一个 SPA（就像一个居中的布局，当我的用户登录谷歌联系人布局时，都来自 vuetify 页面），但我对如何创建登录页面有疑问。最好的方法。我的疑问是，创建一个路由器，并在登录和主页之间进行更改，在我的主页中，另一个路由器在布局内部进行更改（谷歌联系人）或登录页面是一个组件，只有在我的用户登录后我才创建组件（谷歌联系人）和路由器内部？

tks

标签： vue.jsvuetify.js

解决方案

你可以这样做：


new Router({
    mode: 'hash', // https://router.vuejs.org/api/#mode
    routes: [
        {
            path: '/',
            name: 'Home',
            component: MyComponent,
            beforeEnter: (to, from, next) => {
                if(!isAuthenticated()) {
                    return next({name: 'login'});
                }
                return next();
            },
        },
        {
            path: '/login',
            name: 'Login',
            component: LoginComponent
        }
    ]
});

那么你所需要的就是以isAuthenticated()某种方式实现。您确保LoginComponent具有设置令牌或 cookie 的功能，以便保存某种登录状态。

看看https://router.vuejs.org/guide/#html

推荐阅读