首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Nuxt新手- Firebase auth不进行刷新

Nuxt新手- Firebase auth不进行刷新
EN

Stack Overflow用户
提问于 2019-12-22 21:02:12
回答 2查看 2.1K关注 0票数 0

我已经搜索并尝试了大量的例子和不同的东西,但仍然完全停留在这里--我已经在…上扯了两天的头发了我有一个常见的问题,我的应用程序工作良好,如果我登录并点击链接,但如果我刷新或点击一个网址直接在浏览器,Firebase似乎认为我没有一个认证的会话。

编辑--经过更多的思考后,我认为这是因为在刷新时,Vue 服务器正在发出请求。在单击链接时,客户端发出请求.最大的区别是没有在服务器请求上设置或发送会话/ cookie。发射的解决方案是重定向吗?还是有一种方法可以在页面加载时发送浏览器的cookie/会话?还是在Vue和Firebase之间构建某种服务器到服务器的身份验证,然后通过Vue/ Vuex管理登录状态?

这是FB返回的错误:

代码语言:javascript
运行
复制
Error during getting LIST of presentations! FirebaseError: [code=permission-denied]: Missing or insufficient permissions. 

以下是我正在做的事情:

首先,在我的存储/index.js中,我们解码了一个用户数据cookie,并将其分配给一个名为setUserLoggedIn的操作(我知道我有相同的值集两次,但是保留它的完整性:)

这段代码看起来像预期的那样工作(也就是说,它总是在Nuxt启动时执行的。我们这样做是为了确保在我们做任何事情之前,我们已经从Vuex商店中获得了cookie中的用户数据。它解码cookie/将预期值发送到setUserLoggedin

代码语言:javascript
运行
复制
    import { getUserFromCookie } from '@/helpers'
export const actions = {
  async nuxtServerInit({ dispatch }, { req }) {
    const user = getUserFromCookie(req)
    console.log('This code fires first with user ' + JSON.stringify(user))
    if (user) {
      console.log('Found a user cookie - maybe we can log them in')
      await dispatch('user/setUserLoggedin', {
        email: user.email,
        uid: user.user_id,
        thisUserid: user.user_id
      })
    }
  }
}

然后,我们通过两个突变将登录状态和用户详细信息提交回Vuex的状态,然后确认用户是使用Firebase登录的:

代码语言:javascript
运行
复制
 setUserLoggedin({ commit }, user) {

    commit('LOGIN_STATUS', true)
    console.log(`Re-affirming login user object is ${JSON.stringify(user)}`)
    commit('LOGIN_USER', {
      loginInstanceId: 'a-key-to-track-each-login-session',
      useruniqueid: user.thisUserid,
      emailaddress: user.email,
      uid: user.thisUserid
    })
    return UserService.affirmLogin(user)
  },

最后,我试着检查一下是否有一个使用Firebase的会话(firebase.auth().currentUser返回未定义的)。使用其他Firebase命令侦听状态更改或诸如此类的事情没有任何进展.从字面上说,我尝试过的每一件事都是空白的。

代码语言:javascript
运行
复制
  async affirmLogin(myuser) {
    const currentUser = await firebase.auth().currentUser
    console.table(currentUser)
  },

我还设置了一个带有Firebase令牌的令牌

代码语言:javascript
运行
复制
await firebase
        .auth()
        .signInWithEmailAndPassword(user.emailaddress, user.password)
        .then(() => {
          firebase.auth().onAuthStateChanged(user => {
            currentUser = user.uid
          })
        })
      const token = await firebase.auth().currentUser.getIdToken(true)
      Cookies.set('access_token', token) // saving token in cookie for server rendering

我尝试了无数不同的东西--从配置Vuex状态/getter和Firebase命令,到注释我的代码、调试等,但是我无法理解为什么这不起作用。尽管我有一个cookie,并且我认为Vuex存储中有数据,但是Firebase似乎忽略了或看不到任何现有的刷新会话。

但是,如果我创建了一个通过UI导航到的页面,点击上面的路径(即,我使表单提交按钮点击affirmLogin),它就会起作用。

我认为问题是,我的会议有些不对劲,但我只是看不出它可能是什么。我也不确定Firebase应该如何在刷新时收集userid。我见过的其他例子似乎“只是起作用了”,但对我来说却不是:(任何帮助都非常感谢!)

谢谢

EN

回答 2

Stack Overflow用户

发布于 2019-12-22 23:07:53

TBH我不知道Vue、Nuxt或Firebase,但我的第一个猜测是,当您要求Firebase返回currentUser时,它还没有完全初始化或类似的类型。消防队的医生们似乎同意:

备注:由于auth对象尚未完成初始化,currentUser也可能为空。如果使用观察者来跟踪用户的登录状态,则不需要处理这种情况。

您试过使用身份验证状态观测器吗?看起来是这样的:

代码语言:javascript
运行
复制
firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in.
  } else {
    // No user is signed in.
  }
});

我建议尽可能早地在代码中设置它,以确保您不会错过身份验证状态更改。你可以从这样的事情开始:

代码语言:javascript
运行
复制
setUserLoggedin({ commit }, user) {
  const userPromise = new Promise((resolve, reject) => {
    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        // User is signed in.
        console.log('got user', user);
        resolve(true);
      } else {
        // No user is signed in.
        resolve(false);
      }
    });
  });

  commit('LOGIN_STATUS', true);

  console.log(`Re-affirming login user object is ${JSON.stringify(user)}`);
  commit('LOGIN_USER', {
    loginInstanceId: 'a-key-to-track-each-login-session',
    useruniqueid: user.thisUserid,
    emailaddress: user.email,
    uid: user.thisUserid,
  });

  return userPromise;
}

我很肯定这是不够好的最终解决办法,但它可能会帮助你走上正确的轨道,如果我的猜测是正确的。

票数 0
EN

Stack Overflow用户

发布于 2020-04-11 23:19:22

在刷新或重新加载后收到未经验证的错误时,我遇到了同样的问题,问题来自用户端点的propertyName,如果您直接返回用户,而不是使用对象'user':{...},您应该将propertyName : false放在nuxt config的auth选项中,您可以通过直接执行下面的代码来检查auth将收到什么结果。

代码语言:javascript
运行
复制
let user = await this.$auth.requestWith(    
    'local',    //strategy name
    null,       //endpoint
    { url: '/api/user', method: 'get', propertyName: false } // options.endpoints.user
);
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/59448002

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档