@nuxtjs/auth 为啥刷新页面总是重定向到登录

Posted 2023-03-07

【中文标题】@nuxtjs/auth 为啥刷新页面总是重定向到登录

【英文标题】：@nuxtjs/auth Why refresh page always redirect to login@nuxtjs/auth 为什么刷新页面总是重定向到登录

【发布时间】：2020-03-14 00:33:14

【问题描述】：

刷新后我无法刷新页面或打开安全页面的新标签，否则新标签会将我重定向到登录 再次

版本

Nuxt.js v2.9.1
@nuxtjs/module: 4.8.4

安全页面

middleware: ['auth'],

auth-module 的中间件

登录页面

middleware: ['guest'],

中间件/guest.js

export default async function( store, redirect ) 
    // console.log(store.state.auth)
    if (store.state.auth.loggedIn) 
        return redirect('/')
    

console.log(store.state.auth) = user: null, loggedIn: false, strategy: 'local'

nuxt.config.js

auth: 
        strategies: 
            local: 
                endpoints: 
                    // register:  url: 'member', method: 'post', propertyName: 'data.accessToken' ,
                    login:  url: 'api/authen-admin', method: 'post', propertyName: 'custom' ,
                    user:  url: 'api/admin', method: 'get', propertyName: 'custom' ,
                    logout: false
                ,
                tokenRequired: 'Authorization',
                tokenType: false
            
        ,
        watchLoggedIn: true,
        localStorage: 
            prefix: 'auth.'
        ,
        cookie: 
            prefix: 'auth.', // Default token prefix used in building a key for token storage in the browser's localStorage.
            options: 
                path: '/', // Path where the cookie is visible. Default is '/'.
                expires: 5 // Can be used to specify cookie lifetime in Number of days or specific Date. Default is session only.
                    // domain: '', // Domain (and by extension subdomain/s) where the cookie is visible. Default is domain and all subdomains.
                    // secure - false, // Sets whether the cookie requires a secure protocol (https). Default is false, should be set to true if possible.
            
        ,
        redirect: 
            login: '/login',
            logout: '/login',
            home: '/'
        ,
        resetOnError: true

我尝试使用 vuex-persist 来持久化本地存储但不起作用，并且当登录不重定向到主路径时仍然保持登录路径

【问题讨论】：

嘿！这是来自@VueScreencasts 的杰弗里。感谢您制作并添加代码。 “我尝试使用 vuex-persist 来持久化本地存储但不起作用” - 两个想法： 1. 我不必使用额外的库来使本地存储或 cookie 持久化。 vuex-persist 会干扰吗？ 2.“不起作用”是什么意思？它根本不存储cookie吗？还是它存储cookie但不将它们发送到服务器？还是发送到服务器，但是认证错误？

@JeffreyBiles 1. 我不使用额外的库来使 localstrorage 或 cookie 像你一样。 2.“不起作用”这意味着当我使用 vuex-persist @nuxtjs/auth 登录成功时不重定向但卸载 vuex-persist 然后 @nuxtjs/auth 登录成功时重定向

"Vuex-persist" 是额外的库，因为它在您卸载 vuex-persist 时有效，我想我们有答案了。如果您需要将 vuex-persist 用于其他事情，那么您应该询问以前使用过该库的人，因为该错误似乎在 vuex-persist 而不是 Nuxt Auth 中。

抱歉让你混淆了，当我只使用 Nuxt Auth 时它不起作用它无法刷新页面然后我尝试使用“Vuex-persist”来持久化本地存储或 cookie 然后状态不为空但是当登录成功时 nuxt auth 出现错误 nuxt auth 无法重定向到安全页面

【参考方案1】：

也许您可以使用nuxtServerInit 来检查登录用户。放在store/index.js 文件夹中作为根文件夹。每次您第一次打开网络时，都会运行此代码。例如，我使用 cookie 来检查用户是否登录：

export const actions = 
  async nuxtServerInit ( commit ,  req ) 
    let auth = null
    if (req.headers.cookie) 
      // cookie found
      try 
        // check data user login with cookie
        const  data  = await this.$axios.post('/api/auths/me')
        // server return the data is cookie valid loggedIn is true
        auth = data // set the data auth
       catch (err) 
        // No valid cookie found
        auth = null
      
    
    commit('SET_AUTH', auth) // set state auth
  ,

here 文档

【参考方案2】：

扩展 Fauzan Edris 的答案。

我正在使用 Auth Nuxt，解决了我的问题。

export const actions = 
  async nuxtServerInit(
    commit
  , 
    req
  ) 
    let auth = null
    if (req.headers.cookie) 
      // cookie found
      try 
        // check data user login with cookie
        const 
          data
         = await this.$axios.post('/user/profile')
        // server return the data is cookie valid loggedIn is true
        auth = data.data // set the data auth
       catch (err) 
        // No valid cookie found
        auth = null
      
    

    // How we can set the user for AuthNuxt
    // Source: https://auth.nuxtjs.org/api/auth
    this.$auth.setUser(auth)
  ,

【参考方案3】：

您将用户端点的propertyName 设置为'custom'，您是否收到具有此属性名称的响应？当页面重新加载时，auth 插件将尝试fetchUser 方法来确保客户端仍然经过身份验证，如果您没有正确配置用户端点，无论是否接收，用户都将设置为 null，因此您将重定向到登录页面，您可以检查什么用户运行此代码设置的属性：

let user = await this.$auth.requestWith(
    'local', null,  url: 'api/admin', method: 'get', propertyName: 'custom'  );
console.log(user);

【参考方案4】：

我将 Nuxt 与 Laravel Sanctum 一起使用，为我解决问题的是 SESSION_DOMAIN 的问题。我在子域上运行项目，SESSIOn_DOMAIN 设置为“.domain.com”，但必须设置为“sub.domain.com”。