为了账号安全,请及时绑定邮箱和手机立即绑定

Vue 路由器在硬刷新后每个都不起作用

Vue 路由器在硬刷新后每个都不起作用

慕运维8079593 2023-05-25 17:21:08
我遇到了 Vue.js 的新问题,我正在使用我的登录页面登录我的应用程序,一切正常,如果它是管理员配置文件,它会转到管理页面,普通用户会转到主页。但是如果我是管理员并且我用 F5 硬刷新页面然后我不能再去管理页面。我想我知道我的插件调用顺序有问题,我需要在路由器之前调用我的 localStorage,但我没有为 localStorage 使用插件。这是代码,首先是路由器的 beforeEach 函数:router.beforeEach(async (to, from, next) => {  let user =  await store.getters.userInSession;  let token = await store.getters.getToken;  if(to.matched.some(record => record.meta.requiresAuth) && token == '') {    next({ name : 'Connexion'})  } else if (to.matched.some(record => record.meta.is_admin) && user.role  != "Admin"){    next({ name: 'Tableau de bord'})  } else if(to.matched.some(record => record.meta.guest) && token != '') {    next({ name: 'Tableau de bord'})  } else {    next();  }})然后这是我从 vuex 访问我的 localStorage 的方式:import Vue from 'vue';import router from '../../router';const state = {    token: localStorage.getItem('token'),    user: localStorage.getItem('user'),    errors: []};const getters = {    isAuthenticated: state => !!state.token,    userInSession: state => {        return state.user;    },    isAdmin: state => {        return state.user ? state.user.role == 'Admin' : false    },    getToken: state => {        return state.token ? state.token : "";    }};我尝试使用 vue-localstorage 并将其放在路由器之前的 Vue 实例中,但我什至不知道如何全局设置它。它没有被识别为 pluginObject,所以我不能用这个来做 Vue.use。无论如何我试过这个:import Vue from 'vue';import App from './App.vue';import router from './router';import store from './store';import VueLocalStorage from 'vue-localstorage';import vuetify from './plugins/vuetify';new Vue({  VueLocalStorage,  router,  store,  vuetify,  render: h => h(App)}).$mount('#app')我认为最后一件事是相关的,但我不确定,我在 my 中显示了我的用户信息,并且在一次硬刷新之后它也消失了......我这样称呼它:它与我从 vuex 访问的对象相同。如果有人有线索,将不胜感激。
查看完整描述

1 回答

?
喵喔喔

TA贡献1735条经验 获得超5个赞

我通过在创建 vue 实例的地方创建一个钩子解决了我的问题:


new Vue({

  router,

  store,

  beforeCreate() { this.$store.commit('INITIALISATION_STORE') },

  vuetify,

  render: h => h(App),

}).$mount('#app')

我只是像这样在 mutator 中初始化我的商店:


INITIALISATION_STORE(state) {

        if(localStorage.getItem('token')){

            state.token = localStorage.getItem('token')

        }

        if(localStorage.getItem('user')) {

            state.user = JSON.parse(localStorage.getItem('user'))

        }

    }

它工作得很好,我想知道我是否可以把路由器放在商店后面,那个挂钩要刷新并且仍然在受保护的页面上,如果有人知道那么很好,如果不是那将是进一步搜索的问题/测试 :)


查看完整回答
反对 回复 2023-05-25
  • 1 回答
  • 0 关注
  • 80 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信