Vuejs-auth-token NPM

Vue-Auth-Token

基于Token的Vue登录状态插件
通过HTML5的Web Storage进行状态缓存，而非Vuex的Store，保证页面切换，页面刷新及子域名跳转时都不会丢失登录状态
该插件只负责登录状态及token的保存及获取，不涉及登录逻辑

安装

  npm install vuejs-auth-token

Vue加载

import Vue from 'vue'

// 注册插件
import Auth from 'vuejs-auth-token';
Vue.use(Auth);

配置

Vue.use(Auth, {
  webStore : 'session',
  authName : 'signIn',
  tokenName : 'token',
  localAge : 259200
});

webStore

说明：设置使用的web存储器

默认值：session

可选值：

session

使用sessionStorage，临时缓存，关闭浏览器后数据清除

local

使用localStorage，永久缓存，关闭浏览器后数据一直保存，直至手动清除

使用场景：

如需保存登录状态，使用户可自动登录时，使用local模式

authName

说明：设置保存在存储器中的登录状态字段名

默认值：signIn

tokenName

说明：设置保存在存储器中的Token字段名

默认值：token

localAge

说明：token过期时间，存储在localStorage中时，该过期时间有效

过期后，缓存会自动清除

单位：秒（s）

默认值：259200（3天）

配置webStore=‘local’时，该值为 -1 (永不过期)

方法

该插件添加了this.$auth实例方法

this.$auth.login(token, webStore)

如果不传入参数，则只返回当前登录状态，不改变当前状态

如果已有token，传入token可刷新当前已保存的token

无论配置了哪种存储器，这里都可通过设置webStore指定存储器

返回：登录状态，Boolean

this.$auth.signOut()

退出登录

清除已保存的相关数据

token过期时，用此方法进行清除后重新登录

返回：登录状态，Boolean

this.$auth.check()

返回登录状态，Boolean

this.$auth.token()

返回当前保存的token，String

使用

配合vue-router进行自动跳转

插件注册了全局方法Vue.auth

在router.beforeEach中使用全局方法Vue.auth.check()进行状态判断

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.auth)) {
    if (!Vue.auth.check()) {
      next({
        path: '/login',
        query: {
          redirect: to.fullPath
        }
      })
    } else {
      next();
    }
  } else {
    next();
  }
})