#使用方法

安装

npm install shiw-auth --save

配置

所有的配置项，这里可以读取环境变量中的值

export default {
    authServer: 'https://www.xxxx.xyz:1001',
    casServer:'',
    loginPath: '/Login',
    loginOutPath: '/LoginOut',
    tokenEnd: '/connect/token',
    clientId: '',
    grantType: 'shiw_code', // 默认授权方式 支持：shiw_code，jjt_cas
    scope: 'XXXX offline_access',
    returnUrl: `${window.location.origin}/code-callback`,
    casReturnUrl: `${window.location.origin}/cas-callback`,
    loginOutReturnUrl: `${window.location.origin}`, //退出登录后回调地址
    isOnlyCasLogin: false, //是否仅仅支持CAS登录
    isFullCasLoginOut: false, // 是否在全站退出CAS
    extraTokenParams: {},//拓展参数
};

vuex配置

import { vuexShiwAuthStoreModule } from 'shiw-auth';
import config from '@/shiw_auth_config'; // 导入配置文件

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {},
  getters: {
    token: store => {
      return store.auth.access_token;
    },
    isLogin: store => {
      return store.auth.isLogin;
    }
  },
  modules: {
    auth: vuexShiwAuthStoreModule(config) //使用认证模块
  }
});

路由守卫配置

// 导入依赖项
import { isPublicPath } from 'shiw-auth';
import store from '@/store';

// 添加回调路由
const routes = [
    {
        path: '/code-callback',
        name: 'codeCallback',
        component: CodeCallback,
    },
    {
        path: '/cas-callback',
        name: 'CasCallback',
        component: CasCallback,
    },
];

// 配置路由守卫
router.beforeEach((to, from, next) => {
    if (isPublicPath(to.path)) {
        next();
        return;
    }

    if (store.getters.isLogin) {
        next();
    } else {
        // 尝试登录，如果登录成功，那么跳转到目标路由，否则自动跳转到登录界面
        store.dispatch('auth/signIn')
            .then(res => {
                if (res === true) {
                    next({ ...to });
                }
            });
    }
});

//回调路由，关键代码，代码都差不多，唯一的区别就是设置授权方式的不一样
import { mapActions, mapMutations } from 'vuex';

export default {
    name: 'XXXCallback',
    data() {
        return {};
    },
    created() {
        // 这里是唯一的区别，要和配置里面的对应起来
        // jjt_cas、shiw_code
        this.setGrantType('jjt_cas');
    },
    methods: {
        init() {
            this.getToken()
                .then(res => {
                    this.$router.push('/');
                })
                .catch(err => {
                    this.$message.error('token获取失败', 0);
                    console.error(err);
                });
        },
        ...mapActions('auth', ['getToken']),
        ...mapMutations('auth', ['setGrantType'])
    },
    mounted() {
        console.log('XXX跳转回来...');
        this.init();
    }
};