Vue.js应用程序持久登录问题

时间:2019-01-31 13:28:08

标签: vue.js vue-router

我正在使用该库来管理Vue中的角色和权限。
https://github.com/anthonygore/vue-router-user-roles

他们提供了以下代码:

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import VueRouterUserRoles from "vue-router-user-roles";

Vue.use(VueRouterUserRoles, router);

// This would usually be an AJAX call to the server or a cookie check
// Let's assume the user hasn't logged in yet so they're a guest for now.
let authenticate = Promise.resolve({ role: "guest" });

authenticate.then(user => {
  Vue.prototype.$user.set(user);
  new Vue({
    render: h => h(App),
    router
  }).$mount("#app");
});


我使用axios发布到后端,并基于令牌获取用户详细信息:

const token = localStorage.getItem('user-token')
if (token) {
  axios.defaults.headers.common['Authorization'] = 'Bearer ' + token
  axios.post('/api/details').then(response => {
    this.$store.commit('changeRole','registered')
    this.$store.commit('changeName', response.data.success.name)
    this.$store.commit('changeEmail', response.data.success.email)
    this.$store.commit('changeId', response.data.success.id)
    let user = {
      role: this.$store.getters.role,
      name: this.$store.getters.name,
      email: this.$store.getters.email,
      id: this.$store.getters.id
    }
    Vue.prototype.$user.set(user)
  })
}else{
  this.$store.commit('changeRole', 'guest')

如果我尝试调用this。$ user.get()。id,则存储在user变量中的用户详细信息对我的Vue组件不可用。
我该如何解决?我不得不提到我是Vuejs的新手,后端是Laravel 5.7。

谢谢。

0 个答案:

没有答案