前端directus對接單點登錄

只負責前端對接已經在direcuts中設置的單點登錄，不考慮如何在direcuts設置單點登錄

導入directus的sdk，調用封裝好的登錄、登出、及刷新方法。

directus.ts

import {Directus} from '@directus/sdk';

const directus = new Directus('directusUrl');

export async function login(email: string, password: string) {
  let flag = false;
  await directus.auth
    .login({email, password})
    .then((res) => {
      if (typeof res.access_token !== 'undefined') {
        flag = true;
      }
    })
  return flag;
}


export async function refreshtoken() {
  await directus.auth.refresh();
  console.log(' >================(directus.ts:23)', 'fresh token');
}


export async function logout() {
  await directus.auth.logout();
}

export async function userinfo() {
  const userInfo = await directus.users.me.read();
  return userInfo
}


setInterval(() => {
  refreshtoken()
}, 600000)

/router/index.ts 添加路由守衛

// 路由守衛
  Router.beforeEach((to) => {
    const endtime: string | null = LocalStorage.getItem('auth_expires_at')
    if (tools.checkexpires(typeof endtime === 'string' ? endtime : '')) {
      console.log(' >================(index.ts:42)', 11);
      return {name: 'login'}
    }
    const isAuthentication = LocalStorage.getItem('auth_token')
    if (isAuthentication == null && to.name !== 'login' && to.name !== 'callback') {
      return {name: 'login'}
    }
  });

checkexpires()

 //時間戳判斷
  static checkexpires(endtime: string) {
    if (endtime === '') {
      return true
    }
    const now = (new Date()).getTime()
    if (String(now) < endtime) {
      return false
    } else {
      console.log(' >================now,endtime(tools.ts:61)', now, endtime);
      refreshtoken()
      return true
    }

登錄頁

• 可以加一個form表單實現原生directus登錄

<template>
	<form>
                <div class="col-3 q-col-gutter-y-md q-pt-xl">
                  <q-input v-model="email" type="email" label="郵箱" outlined/>
                </div>
                <div class="col-3  q-gutter-md">
                  <q-input v-model="password" type="password" label="密碼" outlined/>
                </div>
              </form>
</template>

<script>
const email = ref('')
const password = ref('')
function checkLogin() {
      login(email.value, password.value).then((r) => {
        if (r) {
          router.push({
            path: '/'
          })
        }
      })
    }
</script>

• 單點登錄跳轉只需添加一個超鏈接，配置好redirect參數即可

  <q-btn class="btn-fixed-width" flat label="OPENID登錄" style="background:#112234;color:#fff;" :href='openidurl'></q-btn>
  
  const openidurl = `https://material-api.dev.supercomputing.link/auth/login/openid?redirect=${window.location.origin}/Oidc/callback`
  

  • CallBack.vue

    <template>
      <q-page>
        <div class="fixed-center text-center">
          <p>
            <!-- <q-icon name="person" size="8em" color="grey-5" /> -->
            <q-circular-progress
              indeterminate
              size="100px"
              :thickness="0.22"
              color="primary"
              track-color="grey-3"
              class="q-ma-md"
            />
          </p>
          <p class="text-body2 text-weight-regular">正在登錄，請稍候...</p>
          <p></p>
        </div>
      </q-page>
    </template>
    
    <script lang="ts">
    import {defineComponent, onMounted} from 'vue';
    import {refreshtoken,} from 'src/service/directus';
    
    export default defineComponent({
      setup() {
        onMounted(async () => {
          await refreshtoken().then(() => {
            window.location.href = window.location.origin + '/project';
          })
        });
      },
    });
    </script>