AskOverflow.Dev

AskOverflow.Dev Logo AskOverflow.Dev Logo

AskOverflow.Dev Navigation

  • 主页
  • 系统&网络
  • Ubuntu
  • Unix
  • DBA
  • Computer
  • Coding
  • LangChain

Mobile menu

Close
  • 主页
  • 系统&网络
    • 最新
    • 热门
    • 标签
  • Ubuntu
    • 最新
    • 热门
    • 标签
  • Unix
    • 最新
    • 标签
  • DBA
    • 最新
    • 标签
  • Computer
    • 最新
    • 标签
  • Coding
    • 最新
    • 标签
主页 / coding / 问题 / 76953757
Accepted
De0x95
De0x95
Asked: 2023-08-22 21:20:30 +0800 CST2023-08-22 21:20:30 +0800 CST 2023-08-22 21:20:30 +0800 CST

Vue3 Vuex Vue-route状态似乎不防

  • 772

编辑: 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
  • 1 1 个回答
  • 15 Views

1 个回答

  • Voted
  1. Best Answer
    Siimm Kahn
    2023-08-22T21:25:10+08:002023-08-22T21:25:10+08:00

    我认为我在这里的回答可能会有所帮助,让我知道任何后续问题。

    如何在vuejs上保存重启页面上登录的状态

    Vue 中的状态会更新并丢失:当组件再次显示时,将创建一个仅具有初始状态的新实例。

    因此,将数据保存在本地(会话、本地(我认为不建议使用本地,因为它在整个浏览器上具有持久性)、cookie 等)

    • 0

相关问题

Sidebar

Stats

  • 问题 205573
  • 回答 270741
  • 最佳答案 135370
  • 用户 68524
  • 热门
  • 回答
  • Marko Smith

    使用 <font color="#xxx"> 突出显示 html 中的代码

    • 2 个回答
  • Marko Smith

    为什么在传递 {} 时重载解析更喜欢 std::nullptr_t 而不是类?

    • 1 个回答
  • Marko Smith

    您可以使用花括号初始化列表作为(默认)模板参数吗?

    • 2 个回答
  • Marko Smith

    为什么列表推导式在内部创建一个函数?

    • 1 个回答
  • Marko Smith

    我正在尝试仅使用海龟随机和数学模块来制作吃豆人游戏

    • 1 个回答
  • Marko Smith

    java.lang.NoSuchMethodError: 'void org.openqa.selenium.remote.http.ClientConfig.<init>(java.net.URI, java.time.Duration, java.time.Duratio

    • 3 个回答
  • Marko Smith

    为什么 'char -> int' 是提升,而 'char -> Short' 是转换(但不是提升)?

    • 4 个回答
  • Marko Smith

    为什么库中不调用全局变量的构造函数?

    • 1 个回答
  • Marko Smith

    std::common_reference_with 在元组上的行为不一致。哪个是对的?

    • 1 个回答
  • Marko Smith

    C++17 中 std::byte 只能按位运算?

    • 1 个回答
  • Martin Hope
    fbrereto 为什么在传递 {} 时重载解析更喜欢 std::nullptr_t 而不是类? 2023-12-21 00:31:04 +0800 CST
  • Martin Hope
    比尔盖子 您可以使用花括号初始化列表作为(默认)模板参数吗? 2023-12-17 10:02:06 +0800 CST
  • Martin Hope
    Amir reza Riahi 为什么列表推导式在内部创建一个函数? 2023-11-16 20:53:19 +0800 CST
  • Martin Hope
    Michael A fmt 格式 %H:%M:%S 不带小数 2023-11-11 01:13:05 +0800 CST
  • Martin Hope
    God I Hate Python C++20 的 std::views::filter 未正确过滤视图 2023-08-27 18:40:35 +0800 CST
  • Martin Hope
    LiDa Cute 为什么 'char -> int' 是提升,而 'char -> Short' 是转换(但不是提升)? 2023-08-24 20:46:59 +0800 CST
  • Martin Hope
    jabaa 为什么库中不调用全局变量的构造函数? 2023-08-18 07:15:20 +0800 CST
  • Martin Hope
    Panagiotis Syskakis std::common_reference_with 在元组上的行为不一致。哪个是对的? 2023-08-17 21:24:06 +0800 CST
  • Martin Hope
    Alex Guteniev 为什么编译器在这里错过矢量化? 2023-08-17 18:58:07 +0800 CST
  • Martin Hope
    wimalopaan C++17 中 std::byte 只能按位运算? 2023-08-17 17:13:58 +0800 CST

热门标签

python javascript c++ c# java typescript sql reactjs html

Explore

  • 主页
  • 问题
    • 最新
    • 热门
  • 标签
  • 帮助

Footer

AskOverflow.Dev

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

Language

  • Pt
  • Server
  • Unix

© 2023 AskOverflow.DEV All Rights Reserve