sso.vue 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  1. <template>
  2. <div class="container">
  3. <div class="logo"></div>
  4. <!-- 登录区域 -->
  5. <div class="content">
  6. <!-- 配图 -->
  7. <div class="pic"></div>
  8. <!-- 表单 -->
  9. <div class="field">
  10. <!-- [移动端]标题 -->
  11. <h2 class="mobile-title">
  12. <h3 class="title">芋道后台管理系统</h3>
  13. </h2>
  14. <!-- 表单 -->
  15. <div class="form-cont">
  16. <el-tabs class="form" style=" float:none;" value="uname">
  17. <el-tab-pane :label="'三方授权(' + client.name + ')'" name="uname">
  18. </el-tab-pane>
  19. </el-tabs>
  20. <div>
  21. <el-form ref="loginForm" :model="loginForm" :rules="LoginRules" class="login-form">
  22. <el-form-item prop="tenantName" v-if="tenantEnable">
  23. <el-input v-model="loginForm.tenantName" type="text" auto-complete="off" placeholder='租户'>
  24. <svg-icon slot="prefix" icon-class="tree" class="el-input__icon input-icon"/>
  25. </el-input>
  26. </el-form-item>
  27. <!-- 授权范围的选择 -->
  28. 此第三方应用请求获得以下权限:
  29. <el-form-item prop="scopes">
  30. <el-checkbox-group v-model="loginForm.scopes">
  31. <el-checkbox v-for="scope in params.scopes" :label="scope" :key="scope"
  32. style="display: block; margin-bottom: -10px;">{{formatScope(scope)}}</el-checkbox>
  33. </el-checkbox-group>
  34. </el-form-item>
  35. <!-- 下方的登录按钮 -->
  36. <el-form-item style="width:100%;">
  37. <el-button :loading="loading" size="medium" type="primary" style="width:60%;"
  38. @click.native.prevent="handleAuthorize(true)">
  39. <span v-if="!loading">同意授权</span>
  40. <span v-else>授 权 中...</span>
  41. </el-button>
  42. <el-button size="medium" style="width:36%"
  43. @click.native.prevent="handleAuthorize(false)">拒绝</el-button>
  44. </el-form-item>
  45. </el-form>
  46. </div>
  47. </div>
  48. </div>
  49. </div>
  50. <!-- footer -->
  51. <div class="footer">
  52. Copyright © 2020-2022 iocoder.cn All Rights Reserved.
  53. </div>
  54. </div>
  55. </template>
  56. <script>
  57. import {getTenantIdByName} from "@/api/system/tenant";
  58. import {getTenantEnable} from "@/utils/ruoyi";
  59. import {authorize, getAuthorize} from "@/api/login";
  60. import {getTenantName, setTenantId} from "@/utils/auth";
  61. export default {
  62. name: "Login",
  63. data() {
  64. return {
  65. tenantEnable: true,
  66. loginForm: {
  67. tenantName: "芋道源码",
  68. scopes: [], // 已选中的 scope 数组
  69. },
  70. params: { // URL 上的 client_id、scope 等参数
  71. responseType: undefined,
  72. clientId: undefined,
  73. redirectUri: undefined,
  74. state: undefined,
  75. scopes: [], // 优先从 query 参数获取;如果未传递,从后端获取
  76. },
  77. client: { // 客户端信息
  78. name: '',
  79. logo: '',
  80. },
  81. LoginRules: {
  82. tenantName: [
  83. {required: true, trigger: "blur", message: "租户不能为空"},
  84. {
  85. validator: (rule, value, callback) => {
  86. // debugger
  87. getTenantIdByName(value).then(res => {
  88. const tenantId = res.data;
  89. if (tenantId && tenantId >= 0) {
  90. // 设置租户
  91. setTenantId(tenantId)
  92. callback();
  93. } else {
  94. callback('租户不存在');
  95. }
  96. });
  97. },
  98. trigger: 'blur'
  99. }
  100. ]
  101. },
  102. loading: false
  103. };
  104. },
  105. created() {
  106. // 租户开关
  107. this.tenantEnable = getTenantEnable();
  108. this.getCookie();
  109. // 解析参数
  110. // 例如说【自动授权不通过】:client_id=default&redirect_uri=https%3A%2F%2Fwww.iocoder.cn&response_type=code&scope=user.read%20user.write
  111. // 例如说【自动授权通过】:client_id=default&redirect_uri=https%3A%2F%2Fwww.iocoder.cn&response_type=code&scope=user.read
  112. this.params.responseType = this.$route.query.response_type
  113. this.params.clientId = this.$route.query.client_id
  114. this.params.redirectUri = this.$route.query.redirect_uri
  115. this.params.state = this.$route.query.state
  116. if (this.$route.query.scope) {
  117. this.params.scopes = this.$route.query.scope.split(' ')
  118. }
  119. // 如果有 scope 参数,先执行一次自动授权,看看是否之前都授权过了。
  120. if (this.params.scopes.length > 0) {
  121. this.doAuthorize(true, this.params.scopes, []).then(res => {
  122. const href = res.data
  123. if (!href) {
  124. console.log('自动授权未通过!')
  125. return;
  126. }
  127. location.href = href
  128. })
  129. }
  130. // 获取授权页的基本信息
  131. getAuthorize(this.params.clientId).then(res => {
  132. this.client = res.data.client
  133. // 解析 scope
  134. let scopes
  135. // 1.1 如果 params.scope 非空,则过滤下返回的 scopes
  136. if (this.params.scopes.length > 0) {
  137. scopes = []
  138. for (const scope of res.data.scopes) {
  139. if (this.params.scopes.indexOf(scope.key) >= 0) {
  140. scopes.push(scope)
  141. }
  142. }
  143. // 1.2 如果 params.scope 为空,则使用返回的 scopes 设置它
  144. } else {
  145. scopes = res.data.scopes
  146. for (const scope of scopes) {
  147. this.params.scopes.push(scope.key)
  148. }
  149. }
  150. // 生成已选中的 checkedScopes
  151. for (const scope of scopes) {
  152. if (scope.value) {
  153. this.loginForm.scopes.push(scope.key)
  154. }
  155. }
  156. })
  157. },
  158. methods: {
  159. getCookie() {
  160. const tenantName = getTenantName();
  161. this.loginForm = {
  162. ...this.loginForm,
  163. tenantName: tenantName ? tenantName : this.loginForm.tenantName,
  164. };
  165. },
  166. handleAuthorize(approved) {
  167. this.$refs.loginForm.validate(valid => {
  168. if (!valid) {
  169. return
  170. }
  171. this.loading = true
  172. // 计算 checkedScopes + uncheckedScopes
  173. let checkedScopes;
  174. let uncheckedScopes;
  175. if (approved) { // 同意授权,按照用户的选择
  176. checkedScopes = this.loginForm.scopes
  177. uncheckedScopes = this.params.scopes.filter(item => checkedScopes.indexOf(item) === -1)
  178. } else { // 拒绝,则都是取消
  179. checkedScopes = []
  180. uncheckedScopes = this.params.scopes
  181. }
  182. // 提交授权的请求
  183. this.doAuthorize(false, checkedScopes, uncheckedScopes).then(res => {
  184. const href = res.data
  185. if (!href) {
  186. return;
  187. }
  188. location.href = href
  189. }).finally(() => {
  190. this.loading = false
  191. })
  192. })
  193. },
  194. doAuthorize(autoApprove, checkedScopes, uncheckedScopes) {
  195. return authorize(this.params.responseType, this.params.clientId, this.params.redirectUri, this.params.state,
  196. autoApprove, checkedScopes, uncheckedScopes)
  197. },
  198. formatScope(scope) {
  199. // 格式化 scope 授权范围,方便用户理解。
  200. // 这里仅仅是一个 demo,可以考虑录入到字典数据中,例如说字典类型 "system_oauth2_scope",它的每个 scope 都是一条字典数据。
  201. switch (scope) {
  202. case 'user.read': return '访问你的个人信息'
  203. case 'user.write': return '修改你的个人信息'
  204. default: return scope
  205. }
  206. }
  207. }
  208. };
  209. </script>
  210. <style lang="scss" scoped>
  211. @import "~@/assets/styles/login.scss";
  212. .oauth-login {
  213. display: flex;
  214. align-items: cen;
  215. cursor:pointer;
  216. }
  217. .oauth-login-item {
  218. display: flex;
  219. align-items: center;
  220. margin-right: 10px;
  221. }
  222. .oauth-login-item img {
  223. height: 25px;
  224. width: 25px;
  225. }
  226. .oauth-login-item span:hover {
  227. text-decoration: underline red;
  228. color: red;
  229. }
  230. </style>