主页 / user-22405459

De0x95's questions

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

编辑： ChatGPT 为我提供了一个解决方案。显然，路由器中的关键字“this”仅指路由器本身，而不是整个Vue应用程序。当我将商店包含在路由器中后，它就工作了。

在这里查看它的遮阳篷：https://chat.openai.com/share/bfac1e16-b520-4725-92f7-5fc883af2598

原来的：

我过去创建了一个小型 vue 应用程序，没有任何路由或存储。
我什至不会描述“后端”。

现在我的任务是创建一个更大的应用程序。所以我想使用 vue router 和 vuex。以及 Codeigniter 4 REST api。
我的问题是访问 vuex 商店。我试图用来router.beforeEach()检查用户是否已经从 API 收到其不记名令牌，表明用户已经登录。

但是当我尝试访问时const token = this.$store.getters.bearer_token;出现以下错误：

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

主要.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;

在路由器中：

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

并在行中：const token = this.$store.getters.bearer_token;我收到提到的错误..

vuejs3