dbappsecurity-auth-vue

dbappsecurity-auth-vue

针对Vue项目设计的一个基于Vuex Store原理开发的统一登录组件,该组件基于 axios模块，使用vue-resource则无效。就是说ajax使用的是axios的请求方式。

使用方法

• npm install dbappsecurity-auth-vue

• 首先在main.js中需要引入 import authStore from 'dbappsecurity-auth-vue',在main.js中需要加入以下代码：

  import authStore from 'dbappsecurity-auth-vue'
  var axios = authStore.axios;
  var store = authStore.store;
  //参数设置，参数不设置则为默认的标题和数据
  store.state.titleName = ''; //网站标题
  store.state.logoUrl = 'http://xxxx.png'; //网站logo图片
  // 将axios挂载到prototype上，在组件中可以直接使用this.axios访问
  Vue.prototype.axios = axios;
  /* eslint-disable no-new */
  new Vue({
    el: '#app',
    router,
    axios,
    store,
    render: (h) => h(App)
  })

• 其次在router中index.js中需要引入 import authStore from 'dbappsecurity-auth-vue',在inex.js中需要加入以下代码：

  import authStore from 'dbappsecurity-auth-vue'
  var store = authStore.store;
  // 页面刷新时，重新赋值token
  if (window.localStorage.getItem('token') && window.localStorage.getItem('token') != 'undefined') {
      store.commit(authStore.LOGIN, window.localStorage.getItem('token'))
  }
  //过滤路由，如果进入该路由需要登录验证，在配置该路由的时候只需添加
  //meta: {requireAuth: true},不需要验证的设为false
  router.beforeEach((to, from, next) => {
    if (to.matched.some(r => r.meta.requireAuth)) {
        if (to.query.token && to.query.token != 'undefined') {
          store.commit(authStore.LOGIN, to.query.token);
          next(to.path);
        } else if (store.state.token) {
          next();
        } else {
           //此处注意路由没有使用hash的就是使用的module是history的模式。需要添加type=j的参数
          location.href = authStore.URL + '?from=' + encodeURIComponent(location.href) + '&title='+ encodeURIComponent(store.state.titleName) + '&logoUrl=' + encodeURIComponent(store.state.logoUrl);
        }
    } else {
        next();
    }
  })

• 统一退出 调用方法 this.$store.commit('SIGNOUT') //此处注意路由没有使用hash的就是使用的module是history的模式。需要添加type=j的参数 location.href = authStore.URL + '?from=' + encodeURIComponent(location.href) + '&title='+ encodeURIComponent(store.state.titleName) + '&logoUrl=' + encodeURIComponent(store.state.logoUrl);