我正在使用该库来管理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。
谢谢。