add user_token

src/api/user_token.js

@@ -0,0 +1,16 @@
+import request from '@/utils/request'
+
+export function list (params) {
+  return request({
+    url: '/user_token/list',
+    params,
+  })
+}
+
+export function remove (data) {
+  return request({
+    url: '/user_token/delete',
+    method: 'post',
+    data,
+  })
+}

src/global.js

@@ -1,6 +1,7 @@
 import { ref, reactive, watch } from 'vue'
 import { list as fetchUsers } from '@/api/user'
 
+// todo 缓存所有用户信息
 export function loadAllUsers () {
   const allUsers = ref([])
   const getAllUsers = async () => {

src/router/index.js

@@ -142,6 +142,12 @@ export const asyncRoutes = [
         meta: { title: 'OauthManage', icon: 'Link' /*keepAlive: true*/ },
         component: () => import('@/views/oauth/index.vue'),
       },
+      {
+        path: '/userToken',
+        name: 'UserToken',
+        meta: { title: 'UserToken', icon: 'Ticket' /*keepAlive: true*/ },
+        component: () => import('@/views/user/token.vue'),
+      },
       {
         path: '/loginLog',
         name: 'LoginLog',

src/utils/i18n/en.json

@@ -447,5 +447,8 @@
   },
   "ToLogin": {
     "One": "To Login"
+  },
+  "UserToken": {
+    "One": "User Token"
   }
 }

src/utils/i18n/ko.json

@@ -433,5 +433,8 @@
   },
   "ToLogin": {
     "One": "로그인하려면 클릭하십시오"
+  },
+  "UserToken": {
+    "One": "사용자 토큰"
   }
 }

src/utils/i18n/ru.json

@@ -447,6 +447,9 @@
   },
   "ToLogin": {
     "One": "Войти"
+  },
+  "UserToken": {
+    "One": "Токен пользователя"
   }
 }
 

src/utils/i18n/zh_CN.json

@@ -431,16 +431,13 @@
   "or login in with": {
     "One": "或使用以下登陆"
   },
-  "Optional, default is" :
-  {
+  "Optional, default is": {
     "One": "可选, 默认值是"
   },
-  "Check your IdP docs, without":
-  {
+  "Check your IdP docs, without": {
     "One": "检查IdP的文档, 不包含"
   },
-  "For OIDC login without a password, enter any 4-20 letters":
-  {
+  "For OIDC login without a password, enter any 4-20 letters": {
     "One": "如果通过 OIDC 登录且未设置密码，请输入任意 4-20 个字符"
   },
   "OldPassword": {
@@ -457,5 +454,8 @@
   },
   "ToLogin": {
     "One": "去登录"
+  },
+  "UserToken": {
+    "One": "用户Token"
   }
 }

src/views/login/log.js

@@ -1,5 +1,6 @@
 import { reactive } from 'vue'
 import { list, remove } from '@/api/login_log'
+import { list as fetchPeers } from '@/api/peer'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { useRoute } from 'vue-router'
 import { T } from '@/utils/i18n'
@@ -23,6 +24,15 @@ export function useRepositories () {
     const res = await list(listQuery).catch(_ => false)
     listRes.loading = false
     if (res) {
+      const uuids = res.data.list.filter(item => item.uuid).map(item => item.uuid)
+      const peers = await fetchPeers({ uuids }).catch(_ => false)
+      if (peers?.data?.list) {
+        res.data.list.forEach(item => {
+          if (item.uuid) {
+            item.peer = peers.data.list.find(peer => peer.uuid === item.uuid)
+          }
+        })
+      }
       listRes.list = res.data.list
       listRes.total = res.data.total
     }

src/views/login/log.vue

@@ -14,7 +14,6 @@
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="handlerQuery">筛选</el-button>
-          <el-button type="danger" @click="toAdd">添加</el-button>
         </el-form-item>
       </el-form>
     </el-card>
@@ -22,18 +21,19 @@
       <!--      <el-tag type="danger" style="margin-bottom: 10px">不建议在此操作地址簿，可能会造成数据不同步</el-tag>-->
       <el-table :data="listRes.list" v-loading="listRes.loading" border>
         <el-table-column prop="id" label="ID" align="center" width="100"/>
-        <el-table-column label="所属用户" align="center" width="120">
+        <el-table-column :label="T('Owner')" align="center" width="120">
           <template #default="{row}">
             <span v-if="row.user_id"> <el-tag>{{ allUsers?.find(u => u.id === row.user_id)?.username }}</el-tag> </span>
           </template>
         </el-table-column>
         <el-table-column prop="client" label="client" align="center" width="120"/>
+        <el-table-column prop="peer.id" :label="T('Peer')" align="center"/>
         <el-table-column prop="uuid" label="uuid" align="center"/>
         <el-table-column prop="ip" label="ip" align="center" width="150"/>
         <el-table-column prop="type" label="type" align="center" width="100"/>
         <el-table-column prop="platform" label="platform" align="center" width="120"/>
-        <el-table-column prop="created_at" label="时间" align="center"/>
-        <el-table-column label="操作" align="center" width="400">
+        <el-table-column prop="created_at" :label="T('CreatedAt')" align="center"/>
+        <el-table-column :label="T('Actions')" align="center" width="400">
           <template #default="{row}">
             <el-button type="danger" @click="del(row)">删除</el-button>
           </template>
@@ -56,6 +56,7 @@
   import { onActivated, onMounted, watch } from 'vue'
   import { loadAllUsers } from '@/global'
   import { useRepositories } from '@/views/login/log.js'
+  import { T } from '@/utils/i18n'
 
   const { allUsers, getAllUsers } = loadAllUsers()
   getAllUsers()

src/views/user/token.js

@@ -0,0 +1,62 @@
+import { reactive } from 'vue'
+import { list, remove } from '@/api/user_token'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { useRoute } from 'vue-router'
+import { T } from '@/utils/i18n'
+
+export function useRepositories () {
+  const route = useRoute()
+  const user_id = route.query?.user_id
+
+  const listRes = reactive({
+    list: [], total: 0, loading: false,
+  })
+  const listQuery = reactive({
+    page: 1,
+    page_size: 10,
+    is_my: 0,
+    user_id: user_id ? parseInt(user_id) : null,
+  })
+
+  const getList = async () => {
+    listRes.loading = true
+    const res = await list(listQuery).catch(_ => false)
+    listRes.loading = false
+    if (res) {
+      listRes.list = res.data.list
+      listRes.total = res.data.total
+    }
+  }
+  const handlerQuery = () => {
+    if (listQuery.page === 1) {
+      getList()
+    } else {
+      listQuery.page = 1
+    }
+  }
+
+  const del = async (row) => {
+    const cf = await ElMessageBox.confirm(T('Confirm?', {param: T('Logout')}), {
+      confirmButtonText: T('Confirm'),
+      cancelButtonText: T('Cancel'),
+      type: 'warning',
+    }).catch(_ => false)
+    if (!cf) {
+      return false
+    }
+
+    const res = await remove({ id: row.id }).catch(_ => false)
+    if (res) {
+      ElMessage.success(T('OperationSuccess'))
+      getList()
+    }
+  }
+
+  return {
+    listRes,
+    listQuery,
+    getList,
+    handlerQuery,
+    del,
+  }
+}

src/views/user/token.vue

@@ -0,0 +1,96 @@
+<template>
+  <div>
+    <el-card class="list-query" shadow="hover">
+      <el-form inline label-width="80px">
+        <el-form-item label="用户">
+          <el-select v-model="listQuery.user_id" clearable>
+            <el-option
+                v-for="item in allUsers"
+                :key="item.id"
+                :label="item.username"
+                :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handlerQuery">筛选</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-card class="list-body" shadow="hover">
+      <el-table :data="listRes.list" v-loading="listRes.loading" border>
+        <el-table-column prop="id" label="id" align="center" width="100"/>
+        <el-table-column :label="T('Owner')" align="center">
+          <template #default="{row}">
+            <span v-if="row.user_id"> <el-tag>{{ allUsers?.find(u => u.id === row.user_id)?.username }}</el-tag> </span>
+          </template>
+        </el-table-column>
+        <el-table-column :label="T('Token')" align="center">
+          <template #default="{row}">
+            <span> {{ maskToken(row.token) }} </span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="created_at" :label="T('CreatedAt')" align="center"/>
+        <el-table-column :label="T('ExpireTime')" prop="expired_at" align="center">
+          <template #default="{row}">
+            <el-tag :type="expired(row)?'info':'success'">{{ row.expired_at ? new Date(row.expired_at * 1000).toLocaleString() : '-' }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column :label="T('Actions')" align="center" width="400">
+          <template #default="{row}">
+            <el-button type="danger" @click="del(row)">{{ T('Logout') }}</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+    <el-card class="list-page" shadow="hover">
+      <el-pagination background
+                     layout="prev, pager, next, sizes, jumper"
+                     :page-sizes="[10,20,50,100]"
+                     v-model:page-size="listQuery.page_size"
+                     v-model:current-page="listQuery.page"
+                     :total="listRes.total">
+      </el-pagination>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+  import { onActivated, onMounted, watch } from 'vue'
+  import { loadAllUsers } from '@/global'
+  import { useRepositories } from '@/views/user/token.js'
+  import { T } from '@/utils/i18n'
+
+  const { allUsers, getAllUsers } = loadAllUsers()
+  getAllUsers()
+
+  const {
+    listRes,
+    listQuery,
+    getList,
+    handlerQuery,
+    del,
+  } = useRepositories()
+
+  onMounted(getList)
+  onActivated(getList)
+
+  watch(() => listQuery.page, getList)
+
+  watch(() => listQuery.page_size, handlerQuery)
+  const maskToken = (token) => {
+    return token.slice(0, 4) + '****' + token.slice(-4)
+  }
+  const expired = (row) => {
+    const now = new Date().getTime()
+    return row.expired_at * 1000 < now
+  }
+</script>
+
+<style scoped lang="scss">
+.list-query .el-select {
+  --el-select-width: 160px;
+}
+
+
+</style>