Navigation

    Quasar Framework

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. darkshifty
    D
    • Profile
    • Following 0
    • Followers 0
    • Topics 3
    • Posts 10
    • Best 2
    • Groups 0

    darkshifty

    @darkshifty

    2
    Reputation
    4
    Profile views
    10
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    darkshifty Follow

    Best posts made by darkshifty

    • Axios interceptor and router push not working

      I am trying to push users back to the login page if authentication fails. However in a Axios interceptor the router push doesn’t seem to work. Are there good any other ways that i can deal with a authentication fail?

      import Vue from 'vue'
      import axios from 'axios'
      import store from '../store';
      
      // request interceptor
      axios.interceptors.request.use(
          config => {
              const token = store().getters['auth/accessToken'];
              if (token) {
                  config.headers['Authorization'] = 'Bearer ' + token;
              }
              return config;
          },
          error => {
              Promise.reject(error)
          });
      
      // response interceptor
      axios.interceptors.response.use((response) => {
              return response
          },
          function (error) {
      
              if (error.response.status === 401 && !window.refreshing) {
                  window.refreshing = true;
                  return axios.post('http://posadmin/api/auth/refresh',
                      {
                          "refresh_token": store().getters['auth/refreshToken']
                      })
                      .then(res => {
                          console.log(res.status);
                          console.log(res.data);
                          if (res.status === 200) {
                              store().commit("auth/refreshToken", res.data);
                              axios.defaults.headers.common['Authorization'] = 'Bearer ' + store().getters['auth/accessToken'];
      
                              return axios(error.config);
                          } else {
                              console.log('200 else');
                              store().dispatch("auth/setLogout");
                              this.$router.push('/login');
                          }
                      })
                      .catch((error) => {
                          console.log(window.refreshing);
                          console.log('catch '+error);
                          store().dispatch("auth/setLogout");
                          this.$router.push('/login');
                      });
              }
      
              // return Error object with Promise
              return Promise.reject(error);
          });
      
      Vue.prototype.$axios = axios;
      
      
      
      posted in Help
      D
      darkshifty
    • RE: q-select how to close when not in focus

      @metalsadman thank you, that is a great solution! for reference, I’ve created the following:

      methods: {
          mouseEnter() {
              this.mouseLeft = false
          },
          mouseLeave() {
              this.mouseLeft = true
              setTimeout(() => {
                  if (this.mouseLeft) {
                      this.$refs.categorySelect.hidePopup()
                      this.$refs.categorySelect.focused = false
                  }
              }, 200);
          }
      },
      
      <q-select standout="bg-red text-white"
                ref="categorySelect"
                bg-color="white"
                class="q-pa-xs"
                square
                dense
                v-model="category"
                :options="definitions.categoryOptions"
                label="Catalogus">
          <template v-slot:option="{ itemProps, itemEvents, opt, selected, toggleOption }">
              <q-item v-bind="itemProps"
                      v-on="itemEvents"
                      @mouseenter="mouseEnter"
                      @mouseleave="mouseLeave">
                  <q-item-section>
                      <q-item-label v-html="opt"></q-item-label>
                  </q-item-section>
              </q-item>
          </template>
      </q-select>
      
      posted in Help
      D
      darkshifty

    Latest posts made by darkshifty

    • RE: q-select how to close when not in focus

      @metalsadman thank you, that is a great solution! for reference, I’ve created the following:

      methods: {
          mouseEnter() {
              this.mouseLeft = false
          },
          mouseLeave() {
              this.mouseLeft = true
              setTimeout(() => {
                  if (this.mouseLeft) {
                      this.$refs.categorySelect.hidePopup()
                      this.$refs.categorySelect.focused = false
                  }
              }, 200);
          }
      },
      
      <q-select standout="bg-red text-white"
                ref="categorySelect"
                bg-color="white"
                class="q-pa-xs"
                square
                dense
                v-model="category"
                :options="definitions.categoryOptions"
                label="Catalogus">
          <template v-slot:option="{ itemProps, itemEvents, opt, selected, toggleOption }">
              <q-item v-bind="itemProps"
                      v-on="itemEvents"
                      @mouseenter="mouseEnter"
                      @mouseleave="mouseLeave">
                  <q-item-section>
                      <q-item-label v-html="opt"></q-item-label>
                  </q-item-section>
              </q-item>
          </template>
      </q-select>
      
      posted in Help
      D
      darkshifty
    • RE: q-select how to close when not in focus

      I agree, sadly the business wants this so I have to jump some loops. I will have a look at q-menu, maybe I can emulate the same with the desired behaviour.

      Dankjewel

      posted in Help
      D
      darkshifty
    • RE: q-select how to close when not in focus

      Yeah this is exactly the problem, i can only set the mouse leave to the select element. The function isn’t attached to the options.

      <q-select standout="bg-red text-white"
                bg-color="white"
                class="q-pa-xs"
                square
                dense
                v-model="category"
                v-on:mouseleave.native="doSomething"
                :options="categoryOptions"
                label="Catalog" />
      

      so once the user goes out of the select area (to select an option) mouse leave is fired. However, I wish to close the dropdown once the mouse leaves the selectbox and options.

      posted in Help
      D
      darkshifty
    • RE: Axios interceptor and router push not working

      Sorry for coming back very late to this topic, however the router intercept is very sensitive. Using window.location, dispatching/committing data in vuex or any other logics in the intercept are all very inconsistent. The users were experiencing different data in their localstorage than in their browser. I ended up with the following.

      import VueRouter from 'vue-router'
      import routes from './routes'
      import store from 'src/store'
      
      const router = new VueRouter({
          // This will make the page scroll to top for all route navigations.
          scrollBehavior: () => ({x: 0, y: 0}),
          routes,
          mode: process.env.VUE_ROUTER_MODE,
          base: process.env.VUE_ROUTER_BASE
      });
      
      const routingServiceChecks = async (to, from, next) => {
          const requiresAuth = to.matched.some(route => route.meta.requiresAuth);
          const accessToken = store().getters['auth/accessToken'];
      
          // authenticated check
          if (requiresAuth && accessToken === null) {
              return next('/login');
          }
          // always go to the next route
          next();
      };
      
      router.beforeEach(routingServiceChecks);
      
      export default router
      

      I moved all other logics to the base layout or other components. I made a separate service which I catch seperately once the data retrieval is initiated and fails. Refreshing tokens I moved to a global function which is initiated on a failure of retrieving any data, persisting the new tokens to the localstorage after that has been 100% successful.

      here is an example of my login function and refresh without the use of interception:

      async onSubmit() {
          await this.$store.dispatch('instance/loading', true);
          if (this.$v.$invalid) {
              await this.$store.dispatch('instance/loginFailed', this.$t('login.empty'));
          } else {
              await this.$auth.login(this.login).then(response => {
                  if (response.status === 200) {
                      this.$store.dispatch('auth/loginSuccess', response.data).then(() => {
                          if(this.redirect !== '') {
                              router.push({name: this.redirect}, onComplete => {}, onAbort => {})
                          } else {
                              router.push({name: 'home'}, onComplete => {}, onAbort => {})
                          }
                      });
                  } else {
                      this.$store.dispatch('instance/loginFailed', this.$t('text.login.failed'))
                  }
              }).catch(error => {
                  this.$store.dispatch('instance/loginFailed',
                      this.$t('text.' + Mixins.error('login', error.response.status))
                  );
              })
          }
          await this.$store.dispatch('instance/loading', false);
      }
      
      attemptRefresh (type) {
          this.$auth.refresh().then(response => {
              // set refresh to success
              this.$store.dispatch('auth/setRefreshSuccess', response.data).then(() => {
                  switch (type) {
                      case 'core':
                          this.core()
                          break;
                      case 'sync':
                          this.sync()
                          break;
                  }
              })
          }).catch(() => {
              this.setError(false, true)
          })
      }
      
      posted in Help
      D
      darkshifty
    • q-select how to close when not in focus

      I’m trying to work with Q-Select the end user requested it to close when the mouse isn’t on the select or dropdown. What is the best way to archieve this Quasar wise?

      posted in Help
      D
      darkshifty
    • RE: Problem dynamic import component with `this.$q.dialog(...)`

      I had this issue too but it eventually it seemed that there was something wrong deep in a computed vuex store on the dialog. I had a typo within a state that I used and the dialog failed to create with all sorts of errors like Cannot read property ‘show’ or ‘hide’ of undefined

      posted in Help
      D
      darkshifty
    • Axios interceptor and router push not working

      I am trying to push users back to the login page if authentication fails. However in a Axios interceptor the router push doesn’t seem to work. Are there good any other ways that i can deal with a authentication fail?

      import Vue from 'vue'
      import axios from 'axios'
      import store from '../store';
      
      // request interceptor
      axios.interceptors.request.use(
          config => {
              const token = store().getters['auth/accessToken'];
              if (token) {
                  config.headers['Authorization'] = 'Bearer ' + token;
              }
              return config;
          },
          error => {
              Promise.reject(error)
          });
      
      // response interceptor
      axios.interceptors.response.use((response) => {
              return response
          },
          function (error) {
      
              if (error.response.status === 401 && !window.refreshing) {
                  window.refreshing = true;
                  return axios.post('http://posadmin/api/auth/refresh',
                      {
                          "refresh_token": store().getters['auth/refreshToken']
                      })
                      .then(res => {
                          console.log(res.status);
                          console.log(res.data);
                          if (res.status === 200) {
                              store().commit("auth/refreshToken", res.data);
                              axios.defaults.headers.common['Authorization'] = 'Bearer ' + store().getters['auth/accessToken'];
      
                              return axios(error.config);
                          } else {
                              console.log('200 else');
                              store().dispatch("auth/setLogout");
                              this.$router.push('/login');
                          }
                      })
                      .catch((error) => {
                          console.log(window.refreshing);
                          console.log('catch '+error);
                          store().dispatch("auth/setLogout");
                          this.$router.push('/login');
                      });
              }
      
              // return Error object with Promise
              return Promise.reject(error);
          });
      
      Vue.prototype.$axios = axios;
      
      
      
      posted in Help
      D
      darkshifty
    • RE: Open a q-tab-panel with a q-item

      This issue is resolved, i did not notice but i only added QTabPanels this while QTabPanel was needed

      posted in Help
      D
      darkshifty
    • RE: Open a q-tab-panel with a q-item

      Thank you for putting time into this.
      Once you click the menu item, the content of the “tab-panel” doesn’t change. i used the same approach as the tab panel docs.

      posted in Help
      D
      darkshifty
    • Open a q-tab-panel with a q-item

      Hi,

      I am trying to open a tab on the click of a list item however i cannot find any documentation on how to trigger such an event, is this something i have to write myself? or am i missing something little in the below code?

      <template>
          <q-page class="q-pa-md full-width row justify-center q-gutter-md items-start content-start">
            <q-card flat bordered class="col-xs-12 col-md-3 col-lg-2 bg-grey-1">
              <q-card-section>
                <div class="row items-center no-wrap">
                  <div class="col">
                    <q-list v-model="tab">
                      <q-item
                        clickable
                        v-ripple
                        :active="tab === 'account'"
                        @click="tab = 'account'"
                        active-class="my-menu-link">
                        <q-item-section avatar>
                          <q-icon name="eva-inbox" />
                        </q-item-section>
      
                        <q-item-section>Account</q-item-section>
                      </q-item>
      
                      <q-item
                        clickable
                        v-ripple
                        :active="tab === 'subscriptions'"
                        @click="tab = 'subscriptions'"
                        active-class="my-menu-link">
                        <q-item-section avatar>
                          <q-icon name="eva-lock" />
                        </q-item-section>
      
                        <q-item-section>Subscriptions</q-item-section>
                      </q-item>
      
                      <q-item
                        clickable
                        v-ripple
                        :active="tab === 'billing'"
                        @click="tab = 'billing'"
                        active-class="my-menu-link">
                        <q-item-section avatar>
                          <q-icon name="eva-lock" />
                        </q-item-section>
      
                        <q-item-section>Billing</q-item-section>
                      </q-item>
                    </q-list>
                  </div>
                </div>
              </q-card-section>
            </q-card>
            <q-card flat bordered class="col-xs-12 col-md-8 col-lg-6 bg-grey-1">
              <q-card-section>
                <div class="row items-center no-wrap">
                  <div class="col">
                    <q-tab-panels v-model="tab" animated>
                      <q-tab-panel name="account">
                        <div class="text-h6">account</div>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                      </q-tab-panel>
      
                      <q-tab-panel name="subscriptions">
                        <div class="text-h6">subscriptions</div>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                      </q-tab-panel>
      
                      <q-tab-panel name="billing">
                        <div class="text-h6">billing</div>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                      </q-tab-panel>
                    </q-tab-panels>
                  </div>
                </div>
              </q-card-section>
            </q-card>
          </q-page>
      </template>
      
      <style>
      </style>
      
      <script>
          export default {
              name: 'PageSettings',
              data () {
                  return {
                      tab: 'account'
                  }
              }
          }
      </script>
      
      <style>
        .my-menu-link {
          color: white;
          background: #F2C037;
        }
      </style>
      
      
      posted in Help
      D
      darkshifty