首页 > 解决方案 > VUEX:在动作或突变中传递 keycloak 用户数据

问题描述

通常我检索我的用户的数据,例如:

 this.$keycloack.tokenParsed.name 

但是如果在我的 index.js 文件中,我尝试在一个动作中调用它,或者在一个突变中它不起作用。
如何在动作或突变中调用像 this.$keycloack.tokenParsed.name 或类似的字符串?

这是我的钥匙披风:

  import Vue from "vue";
     import { BootstrapVue, BootstrapVueIcons } from "bootstrap-vue";
     import App from "./App.vue";
     import router from "./router";
     import store from "./store";

     //bootstrap styles
     import "bootstrap/dist/css/bootstrap.css";
     import "bootstrap-vue/dist/bootstrap-vue.css";
     import "./scss/app.scss";

     import axios from "axios";
     //import jwtDecode from "jwt-decode";

     // Keycloak
     import VueKeycloakJs from "@dsb-norge/vue-keycloak-js";
     import KeycloakConfig from "@/keycloak.json";

     Vue.use(BootstrapVue);
     Vue.use(BootstrapVueIcons);

     // Vue.config.productionTip = false;

     Vue.use(VueKeycloakJs, {
       init: {
         // Use 'login-required' to always require authentication
         // If using 'login-required', there is no need for the router 
     guards in router.js
         onLoad: "check-sso"
       },
       config: {
         realm: KeycloakConfig.realm,
         url: KeycloakConfig["auth-server-url"],
         clientId: KeycloakConfig.resource,
         clientSecret: KeycloakConfig.credentials.secret
       },
       onReady: keycloak => {
         console.log("Keycloak ready");
         // if (keycloak.token) {
         //   store.commit("global/userData", jwtDecode(keycloak.token));
         // }

         axios.interceptors.request.use(
           config => {
             config.headers["X-Auth-Token"] = keycloak.token || "";
             return config;
           },
           error => {
             return Promise.reject(error);
           }
         );
         new Vue({
           el: "#app",
                router,
           store,
           components: { App },
           template: "<App/>",
           render: h => h(App)
          }).$mount("#app");
         // new Vue({
         //   router,
         //   store,
         //   render: h => h(App)
         // }).$mount("#app");
       },
       onInitError: error => {
         console.log("Keycloak init error");
         // Note that error may be undefined even though an error has 
     occurred,
         // as Keycloak does not return an error object in every error case.
         console.log("Error: ", error);
       }
     });

这些是我的代码的其他详细信息

标签: vue.jsvuexkeycloak

解决方案


推荐阅读