在 main.js 文件上使用 vuejs 插件 [英] Using vuejs plugin on the main.js file

问题描述

我正在尝试创建一个插件来管理我的 vuejs 应用程序中的 Oauth2 令牌数据.

Im trying to create a plugin for manage the Oauth2 token data in my vuejs app.

我根据互联网上提供的一些教程创建了该插件.

I created the plugin following some few tutorials that are available on the internet.

var plugin = {}

plugin.install = function (Vue, options) {
  var authStorage = {
    getToken () {
      let token = localStorage.getItem('access_token')
      let expiration = localStorage.getItem('expiration')
      if (!token || !expiration) {
        return null
      }
      if (Date.now() > parseInt(expiration)) {
        this.destroyToken()
        return null
      }

      return token
    },
    setToken (accessToken, expiration, refreshToken) {
      localStorage.setItem('access_token', accessToken)
      localStorage.setItem('expiration', expiration + Date.now())
      localStorage.setItem('refresh_token', refreshToken)
    },
    destroyToken () {
      localStorage.removeItem('access_token')
      localStorage.removeItem('expiration')
      localStorage.removeItem('refresh_token')
    },
    isAuthenticated () {
      if (this.getToken()) {
        return true
      } else {
        return false
      }
    }
  }

  Vue.prototype.$authStorage = authStorage
}

export default plugin

但是当尝试访问 main.js 文件上的方法时，我收到错误消息，指出对象未定义.

but when a try to access the methods on the main.js file, i get error saying that the object is undefined.

import Vue from 'vue'
import App from './App'
import router from './router'
import AuthStorage from './AuthStorage.js'

Vue.config.productionTip = false
Vue.use(AuthStorage)

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requireAuth)) {
    if (!Vue.$authStorage.getToken()) {
      next({
        path: '/',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next()
  }
})
axios.defaults.headers.common = {
  'Authorization': `Bearer ${Vue.$authStorage.getToken()}`
}
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

在组件内部，插件按预期工作.问题是当 o 尝试在 main.js 文件中使用时.我已经尝试过:this.$authStoragethis.authStorageVue.authStorage

Inside the components the plugin works as expected. The problem is when o try to use in the main.js file. I already tried with: this.$authStorage this.authStorage Vue.authStorage

没有成功

推荐答案

您正在将 $authStorage 添加到 Vue 的 prototype.

You are adding $authStorage to the prototype of Vue.

Vue.prototype.$authStorage = authStorage

这意味着只能在 Vue 对象的实例上可用(即 new Vue(...) 的结果.

That means will only be available on instances of the Vue object (ie. the result of new Vue(...).

如果你想让 $authStorage 成为 Vue 的一个属性而不需要创建一个实例，你需要将它添加为一个静态属性.

If you want $authStorage to be available as a property of Vue without creating an instance, you need to add it as a static property.

Vue.$authStorage = authStorage

但是，如果是我，我可能会采取不同的方法.我可能会像这样构建 AuthStorage 插件:

But, if it were me, I would probably take a different approach. I would likely build the AuthStorage plugin like this:

const authStorage = {
    getToken() {
      let token = localStorage.getItem('access_token')
      let expiration = localStorage.getItem('expiration')
      if (!token || !expiration) {
        return null
      }
      if (Date.now() > parseInt(expiration)) {
        this.destroyToken()
        return null
      }

      return token
    },
    setToken(accessToken, expiration, refreshToken) {
      localStorage.setItem('access_token', accessToken)
      localStorage.setItem('expiration', expiration + Date.now())
      localStorage.setItem('refresh_token', refreshToken)
    },
    destroyToken() {
      localStorage.removeItem('access_token')
      localStorage.removeItem('expiration')
      localStorage.removeItem('refresh_token')
    },
    isAuthenticated() {
      if (this.getToken()) {
        return true
      } else {
        return false
      }
    },
    install(Vue) {
      Vue.prototype.$authStorage = this
    }
}

export default authStorage

允许我像这样在 Vue 之外使用它，

import Vue from 'vue'
import App from './App'
import router from './router'
import AuthStorage from './AuthStorage.js'

Vue.config.productionTip = false
Vue.use(AuthStorage)

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requireAuth)) {
    if (!AuthStorage.getToken()) {
      next({
        path: '/',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next()
  }
})

并在 Vue 中像这样引用它:

And reference it like this inside of Vue:

created(){
  let token = this.$authStorage.getToken()
}

这是示例.

这篇关于在 main.js 文件上使用 vuejs 插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！