Nuxt Auth 模块经过身份验证的用户数据

Posted 2023-03-07

【中文标题】Nuxt Auth 模块经过身份验证的用户数据

【英文标题】：Nuxt Auth Module Authenticated User Data

【发布时间】：2018-09-30 11:30:10

【问题描述】：

我有一个用于登录用户的 API api/auth。它希望收到一个 access_token（作为 URL 查询、来自标头或来自请求正文）、一个 username 和一个 password .我一直在使用 Vue Chrome 开发者工具，即使我从服务器收到 201 响应，auth.loggedIn 状态仍然是错误的。我认为这可能是我在nuxt.config.js 上的redirect 路径无法正常工作的原因。谁能指出我为什么它不起作用的正确方向？

这是 Vue Chrome 开发者工具的截图

这是服务器登录后的JSON响应。这里的token和上面提到的access_token不同。

    "token": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
    "user": 
        "user_name": "xxxxxxxxxxxxxxxxxx",
        "uid": "xxxxxxxxxxxxxxxxxx",
        "user_data": "XXXXXXXXXXXXXXXXXXXXXXXXX"
    

这里是nuxt.config.js的相关部分

export default 
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth',
    ['bootstrap-vue/nuxt',  css: false ]
  ],
  router: 
    middleware: [ 'auth' ]
  ,
  auth: 
    strategies: 
      local: 
        endpoints: 
          login: 
            url: '/api/auth?access_token=XXXXXXXXXXXXXXXXXXXXXX',
            method: 'post',
            propertyName: 'token'
          ,
          logout: 
            url: '/api/auth/logout',
            method: 'post'
          ,
          user: 
            url: '/api/users/me',
            method: 'get',
            propertyName: 'user'
          
        
      
    ,
    redirect: 
      login: '/',
      logout: '/',
      home: '/home'
    ,
    token: 
      name: 'token'
    ,
    cookie: 
      name: 'token'
    ,
    rewriteRedirects: true
  ,
  axios: 
    baseURL: 'http://localhost:9000/'
  

还有我的store/index.js

export const state = () => (
  authUser: null
)

export const mutations = 
  SET_USER: function (state, user) 
    state.authUser = user
  


export const actions = 
  nuxtServerInit ( commit ,  req ) 
    if (req.session && req.user) 
      commit('SET_USER', req.user)
    
  ,

  async login ( commit ,  username, password ) 
    const auth = 
      username: username,
      password: password
    

    try 
      const  user  = this.$auth.loginWith('local',  auth )
      commit('SET_USER', user)
     catch (err) 
      console.error(err)
    
  

商店中的登录动作是由页面中的这个方法触发的：

export default 
  auth: false,
  methods: 
    async login () 
      try 
        await this.$store.dispatch('login', 
          username: this.form.email,
          password: this.form.password
        )
       catch (err) 
        this.alert.status = true
        this.alert.type = 'danger'
        this.alert.response = err
      
    
  

附：我意识到我在 URL 中明确包含了access_token。目前，我不知道在 Nuxt Auth 模块中可以在哪里设置 master_key 等。

【问题讨论】：

也许这篇文章对你有帮助medium.com/@anas.mammeri/…

【参考方案1】：

在你的 store/index.js 中试试这个

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = () => new Vuex.Store(
  state: 
    authUser: null
  ,
  mutations: 
    SET_USER: function (state, user) 
      state.authUser = user
    
  ,
  actions: 
    CHECK_AUTH: function(token, router) 
      if (token === null) 
        router.push('/login')
      
    
  
)
export default store

对于路由器，这应该在全局范围内工作：

$nuxt._router.push('/')