Javascript 禁止经过身份验证的用户访问nuxt js中的登录页面

我从我的

中间件/auth.js

截取了以下代码，如果用户未经身份验证，这些代码会将用户重定向到登录页面

导出默认函数（{store，redirect}）{
如果（！store.state.admin.isAdmin）{
重定向（'/auth/login'）
}
}

我不会从登录视图访问localStorage，我希望在您的应用商店中设置它，然后访问应用商店。我没有运行此代码，但我认为您希望执行类似的操作

您可以创建另一个check-auth.js中间件，并将其添加到登录视图中

check-auth.js

export default function (context) {
    context.store.dispatch('initAuth', context.req);
}

store/index.js

state:{
     authenticated:false;
}
mutations: {
    setAuthentication(state, auth) {
            state.authenticated = auth;
        },
}
actions: {
    initAuth(vuexContext, req) {
        if (localStorage.getItem('token') && localStorage.getItem('userId')){
            vuexContext.commit('setAuthentication', true);
        }else{
            vuexContext.commit('setAuthentication', false);
        }
    }
},
getters: {
        isAuthenticated(state) {
            return state.authenticated;
        },
    },

然后检查用户是否经过身份验证 auth.js

将中间件添加到视图中

export default {
    middleware: ['check-auth', 'auth'],
    components: {},
    methods: {},
};

---

此代码失败，错误消息为未定义localStorage。这是因为Nuxt js的生命周期挂钩。在初始化DOM之前，中间件正在运行。如果尚未在代码中设置localStorage，则需要在尝试在inintAuth中使用它之前进行设置。我没有在上面的代码中设置localStorage，例如addlocalstorage.setItem（'token'，token）；在尝试使用令牌之前，您可以在函数中获取令牌。因此，在对用户进行身份验证的地方，您应该设置localStorage。

export default {
    middleware: ['check-auth', 'auth'],
    components: {},
    methods: {},
};