前端sso单点登录

最新推荐文章于 2024-06-21 14:36:10 发布

qianduan1020

最新推荐文章于 2024-06-21 14:36:10 发布

阅读量776

点赞数

分类专栏： js vue 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/qianduan1020/article/details/121764633

版权

vue 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

9 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue应用中使用SSO（Single Sign-On）进行用户登录，并通过计算属性和方法实现角色权限判断。利用util.js设置Cookie存储用户信息，登录成功后根据不同角色跳转至相应页面。

摘要由CSDN通过智能技术生成

sso.vue 文件

<template>
	<div></div>
</template>
<script>
import util from '../../utils/util.js';
export default {
	computed: {
		code () {
			return this.$route.query.code;
		},
	},
	methods: {
		setRole (roles) {
			const isLeader = roles.some((item) => {
				return item.roleName === 'leader';
			});
			const isBusinessDepartment = roles.some((item) => {
				return item.roleName === 'business-department';
			});
			const isDataAdmin = roles.some((item) => {
				return item.roleName === 'data-admin';
			});
			const isSysAdmin = roles.some((item) => {
				return item.roleName === 'sys-admin';
			});
			let roleName = 'common'; // 一般角色
			if (isLeader) {
				// 领导
				roleName = 'leader';
			}
			if (isBusinessDepartment) {
				// 业务部门
				roleName = 'business-department';
			}
			if (isDataAdmin) {
				// 数据管理员
				roleName = 'data-admin';
			}
			if (isSysAdmin) {
				// 系统管理员
				roleName = 'sys-admin';
			}
			util.setCookie('roleName', roleName);
			return roleName;
		},
	},
	created () {
		if (!this.code) {
			const url = this.$api.sso_login_url();
			this.$get(url, {}, { isLoading: true }).then((res) => {
				if (res.code === 1000) {
					const origin = window.document.location.origin;
					console.log({ resdata: res.data });
					const herfUrl = `${res.data}&redirect_uri=${origin}/stc/sso`;
					location.href = herfUrl;
				}
			});
		} else {
			const url = this.$api.sso_login_confirm(this.code);
			this.$get(url, {}, { isLoading: true }).then((res) => {
				const { code, data } = res;
				if (code === 1000) {
					let { menus, roles, token, entityId, userName } = data;
					let isAdmin = roles.some((item) => {
						return item.isAdmin === '1';
					});

					isAdmin = isAdmin ? '1' : '0';
					menus = menus.map((item) => {
						return item.menuName;
					});

					util.setCookie('menus', JSON.stringify(menus));
					util.setCookie('isAdmin', isAdmin);
					util.setCookie('token', token);
					util.setCookie('userName', userName);
					util.setCookie('ssoEntityId', entityId);
					this.$message({
						showClose: true,
						type: 'success',
						message: '登录成功',
					});
					// 根据不同的角色跳转不同页面
					// const roleName = this.setRole(roles);
					// const routerName = util.homeForDiffRole(roleName, isAdmin);
					// console.log({ routerName });
					//  this.$router.push({
					//   name: 'routerName',
					// });
					this.$router.push({
						name: 'query',
					});
				}
			});
		}
	},
};
</script>

util.js 文件

import Cookies from 'js-cookie';
const util = {};
util.setCookie = function (name, value) {
  Cookies.set(name, value, { expires: 0.5, sameSite: 'lax', path: process.env.BASE_URL });
};
export default util