当前位置: 首页 > 知识库问答 >
问题:

如何确保我的vuex商店在路由器中可用

百里修真
2023-03-14

早上好,我正在从事一个vue项目,该项目在应用程序中同时使用vue路由器和vuex。只要登录成功,我就会将JWT令牌存储在vuex中。然而,我对以下几点感到困惑

1) 当路由器中的路由发生变化时,动态显示/隐藏我的导航栏中的登录/注销按钮2)访问vuex存储中的JWT令牌。js

因此,基本上我需要访问路由器中的vuex存储,以及如何在vuex状态更改时(即登录成功时)更新导航栏组件

下面是我的代码。我从main.js开始

import Vue from 'vue'
import Router from 'vue-router'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import App from '../app.vue'
import router from '../router.js'
import store from '../store'

Vue.use(Router)
Vue.use(Vuetify)

const vuetify = new Vuetify

document.addEventListener('DOMContentLoaded', () => {
  new Vue({
        el: '#app',
        router,
        vuetify,
        store,
        render: h => h(App)         
  })
})

然后是路由器。js

import Router from 'vue-router'
import Index from './views/index.vue'
import Appointments from './views/appointments.vue'
import CreateAppointment from './views/createAppointment.vue'
import Login from './views/login.vue'
import store from './store'

const router =  new Router({
    routes: [
        {
            path: '/',
            name: 'root',
            component: Index
        },
        {
            path: '/login',
            name: 'login',
            component: Login
        },
        {
            path: '/index',
            name: 'index',
            component: Index
        },
        {
            path: '/appointments',
            name: 'appointments',
            component: Appointments,
            props: true,
            meta: { 
                requiresAuth: true
           }
        },
        {
            path: '/create-appointment',
            name: 'create-appointment',
            component: CreateAppointment,
            meta: { 
               requiresAuth: true
           }
        }
    ]
})   

router.beforeEach((to, from, next) => {
  if(to.matched.some(record => record.meta.requiresAuth)) {
    if (store.getters.isLoggedIn) {
      next()
      return
    }    
    next('/login') 
  } else {
    next() 
  }
})

export default router

然后是商店,index.js在商店文件夹内

import Vue from 'vue'
import Vuex from 'vuex'
import * as patient from './modules/patient.js'
import * as appointment from './modules/appointment.js'
import * as user from './modules/user.js'
import * as notification from './modules/notification.js'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {},
    modules: {
        user,
        patient,
        appointment,
        notification
    }
})

最后是我的纳巴。嵌套在应用程序中的vue组件。vue。Ps我拿出了导航抽屉和底部导航,以减少代码。

<template>
    <nav>       
    <v-app-bar app dark>
        <v-btn text rounded dark v-on:click='showDrawer = !showDrawer'>
            <v-icon class='grey--text' left>menu</v-icon>
        </v-btn>      
      <v-toolbar-title d-sm-none>
        <span class='font-weight-light'>SASSA</span>      
      </v-toolbar-title>
      <v-spacer></v-spacer>   
      <!-- Log in button  -->
      <v-btn text rounded dark v-on:click='login' v-show='!isLoggedIn'>
        <span>Login</span>
        <v-icon class='grey--text' right>arrow_forward</v-icon>
      </v-btn>
      <!-- Log out button  -->
      <v-btn text rounded dark v-on:click='logout' v-show='isLoggedIn'>
        <span>Logout</span>
        <v-icon class='grey--text' right>exit_to_app</v-icon>
      </v-btn>
    </v-app-bar>
    </nav>
</template>

<script>
  import { mapState } from 'vuex'
    export default {
        data(){
            return {
              activeBtn: 1,
              showDrawer: false,
                links: [                    
                    { title: 'Appointments', icon: 'calendar_today', link: '/appointments'},
                    { title: 'New Appointment', icon: 'event', link: '/create-appointment'}
                ]          
            }
        },
    computed: {
      isLoggedIn() {
        var result = (this.$store.getters['isLoggedIn'] == "true")           
        return result
      },      
      ...mapState(['user'])
    },

    methods: {
      logout() {
        this.$store.dispatch('user/logout')
        .then(() => {
          this.$router.push('/login')
        })
      },
      login() {
        this.$router.push('/login')
      }
    }
    }
</script>

这是我尝试访问路由器中的存储的地方

    if (store.getters.isLoggedIn) {

任何帮助都将不胜感激

下面是user.js模块

import AxiosService from '../services/AxiosService.js'

export const namespaced = true

export const state = {
    status: '',             
    token:  '',             
    user:  {}               
}

export const mutations = {
    AUTH_SUCCESS(state, payload){       
        state.status = 'logged_on'
        state.token = payload.token
        state.user = payload.user
    },
    LOGG_OFF(state){
        state.status = 'logged_off'
        state.token = ''
        state.user = {}
    }
}

export const actions = {
    login({commit, dispatch}, user){            
        return AxiosService.logon(user)
        .then(response => {
            const token = response.data.auth_token
            const user = response.data.user             
            localStorage.setItem('token',token)
            commit('AUTH_SUCCESS', {token, user})
        })
        .catch(error => {           
            const notification = {
                type: 'error',
                message: 'Invalid Credentials !!!'
            }   
            dispatch('notification/add', notification, { root: true})
            throw error
        })
    },
    logout({commit}){
        localStorage.setItem('token','')
        commit('LOGG_OFF')
    }
 }

export const getters = {
    isLoggedIn: state => !!state.token,
    authStatus: state => state.status,
    getUser: state => state.user
}

共有1个答案

韦叶秋
2023-03-14

嘿,我总算把它修好了。

问题是因为我的模块是命名的,我必须这样访问

store.getters['user/isLoggedIn']

而不是商店。使用者伊斯洛格丁

再次感谢。不过我还有导航栏不更新的问题

 类似资料:
  • 登录/注销/中间件等本身可以工作,但我似乎无法控制令牌。我尝试在登录后将JWT保存在Vuex存储中,但令牌仅保存在cookie和localStorage中。从文档中我了解到,Vuex中对身份验证的支持是自动添加的。我没有在配置中定义和,因为它们是基于cookie的流所需要的文档(添加它们也不会改变任何事情)。 nuxt.config.js 登录功能 现在,当我成功登录并查看$auth时$声明它返回

  • 我尝试在vuex的操作中使用vue路由器,这在本地主机上运行良好。 然而,当我试图通过从存储文件导入操作来准备存储(模拟)时,我得到了错误。 你能帮我解决这个问题吗? 版本 错误msg app/src/main。js app/src/store/main。js 应用程序/src/路由器/main.js 应用程序/测试/组件/主。测验js 组件

  • 我有一个带有SSR、Vue Cli、Vuex和Typescript的Vue3项目。 在路由器页面中,我需要将数据提交到Vuex存储。在一个。vue文件我只是使用这个$在vuex中键入的存储。d、 例如: 但是如何从没有this或vue实例的ts文件(router/index.ts)中执行此操作呢。 我尝试导入存储索引文件并提交: 但我犯了个错误 类型“”上不存在属性“提交”()= 存储文件(因为我

  • 问题内容: 如何确定Java中路由器/网关的IP?我可以很容易地获得我的IP。我可以使用网站上的服务获取互联网IP。但是,如何确定网关的IP? 如果您知道自己的方法,那么在.NET中这很容易。但是,您如何用Java做到这一点呢? 问题答案: 不幸的是,Java没有像其他语言那样令人愉悦。这是我所做的: 这假定网关是第二个令牌,而不是第三个令牌。如果是这样,则需要添加额外的内容以使令牌生成器再增加一

  • 我有以下Vuex商店(main.js): 我还为Vue路由器(routes.js)定义了以下路由: 我试图这样做,如果Vuex存储了对象,并且将属性设置为,则路由器会将用户重定向到登录页面。 我有这个: 问题是,我不知道如何从函数内部访问Vuex商店的对象。 我知道我可以在组件中使用来设置路由器保护逻辑,但这会使每个组件变得杂乱无章。我想在路由器级别集中定义它。