Início / user-22405459

De0x95's questions

Martin Hope
De0x95
Asked: 2023-08-22 21:20:30 +0800 CST
  • 5

EDIT: ChatGPT tinha uma solução para mim. Aparentemente, a palavra-chave “this” no roteador refere-se apenas ao próprio roteador e não ao aplicativo Vue inteiro. Depois que incluí a loja no roteador funcionou.

Veja seu responsável aqui: https://chat.openai.com/share/bfac1e16-b520-4725-92f7-5fc883af2598

ORIGINAL:

eu criei um pequeno aplicativo vue no passado, sem roteamento nem lojas.
E nem vou descrever o "backend".

Agora fui incumbido de criar um aplicativo que será muito maior. Então decidi usar o roteador vue e o vuex. Bem como uma API REST do Codeigniter 4.
Meu problema é acessar a loja vuex.. Eu estava tentando usar router.beforeEach()para verificar se o usuário já recebeu seu token de portador da API, sugerindo que o usuário já está logado.

Mas quando tento acessar const token = this.$store.getters.bearer_token;recebo o seguinte erro:

TypeError: undefined has no properties
    <anonymous> index.js:24
    guardToPromiseFn vue-router.mjs:2009

Main.js:

import "bootstrap/dist/css/bootstrap.css"

import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'
import router from './router'
import store from './store'

const axiosGuest = axios.create({
    baseURL: "https://api.example.de/user",
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        "X-Requested-With": "XMLHttpRequest",
    },
});

const example = createApp(App);
example.config.globalProperties.$guest = axiosGuest; 
example.use(store);
example.use(router);
example.mount('#app');

import "bootstrap/dist/js/bootstrap.js"

./store/index.js:

import { createStore } from 'vuex'

const store = createStore({
  state: {
    isAuthenticated: false,
    bearer_token: null
  },
  mutations: {

  },
  getters: {
    isAuthenticated: state => {
      return state.isAuthenticated;
    },
    bearer_token: state => {
      return state.bearer_token;
    }
  }
});


export default store;

E aqui no Roteador:

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import LoginView from '../views/LoginView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/login',
    name: 'login',
    component: LoginView
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

router.beforeEach((to, next) => {
  const token = this.$store.getters.bearer_token;
  if(token || to.name === 'login') {
    next();
  } else {
    next({name: 'login'})
  }
});

export default router

E na linha: const token = this.$store.getters.bearer_token;recebo o erro mencionado.

vuejs3