早上好,我正在从事一个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
}
嘿,我总算把它修好了。
问题是因为我的模块是命名的,我必须这样访问
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商店的对象。 我知道我可以在组件中使用来设置路由器保护逻辑,但这会使每个组件变得杂乱无章。我想在路由器级别集中定义它。