1.2.1 • Published 3 years ago
shiw-auth v1.2.1
#使用方法
安装
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();
}
};