更新权限和用户模型

2021-10-13 14:43:03 +08:00
parent 3d194e935d
commit cd7029c298
27 changed files with 575 additions and 162 deletions
@@ -4,7 +4,7 @@
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+<!--    <link rel="icon" href="<%= BASE_URL %>favicon.ico">-->
    <title><%= htmlWebpackPlugin.options.title %></title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
@@ -21,6 +21,7 @@

 <script lang="ts">
 import Vue from 'vue'
+import util from '@/libs/util'

 export default Vue.extend({
  name: 'App',
@@ -32,7 +33,7 @@ export default Vue.extend({
  }),

  mounted() {
-    document.title = '统一认证'
+    util.title('统一认证')
  }
 })
 </script>
@@ -4,10 +4,14 @@
 * Distributed under terms of the MIT license.
 */

+import Vue from 'vue'
 import {Base64} from 'js-base64'
 import ajax from './ajax'
 import store from '@/store'

+export type SuccessFunction<T> = (e: any) => void;
+export type FailedFunction<T> = (e: any) => void;
+
 const Code = {
  42011: '无操作权限',
  22031: '资源不存在 或 您无权操作该资源'
@@ -24,15 +28,16 @@ class Interface {
    this.data = data
  }

-  Start(success: Function, fail?: Function) {
+  Start(success: SuccessFunction<any>, fail?: FailedFunction<any>) {
    const newFail = function (data: any) {
      if (data && data.code === 40001) {
        // no login
        store.dispatch('handleLogOut')
        return
      }
+      // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+      // @ts-ignore
      if (data && data.code > 0 && Code[data.code]) {
-        // Message.warning({message: Code[data.code] || data.err, offset: 100})
      }
      if (fail) {
        fail(data)
@@ -103,12 +108,32 @@ const app = {
  local: '/api/app/',
  get(id: string) {
    return new Interface(ajax.get, this.local + id)
+  },
+  list() {
+    return new Interface(ajax.get, this.local)
+  }
+}
+
+const user = {
+  local: '/api/user/',
+  register(username: string, password: string, prop?: any) {
+    const data = Object.assign({
+      username: username,
+      password: Base64.encode(password)
+    }, prop)
+    return new Interface(ajax.post, this.local, data)
+  },
+  login(username: string, password: string) {
+    return new Interface(ajax.head, this.local + username, {
+      password: Base64.encode(password)
+    })
  }
 }

 const api = {
  role: role,
  app: app,
+  user: user,
  admin: {
    auths() {
      return new Interface(ajax.get, '/api/auth/')
@@ -192,8 +217,8 @@ const api = {
 }

 const Api = {
-  install(Vue: any) {
-    Vue.prototype.api = api
+  install(vue: typeof Vue): void {
+    vue.prototype.$api = api
  }
 }
 export {Api}
@@ -0,0 +1,64 @@
+function padLeftZero(str: string): string {
+  return ('00' + str).substr(str.length)
+}
+
+const util = {
+  title: function (title: string) {
+    window.document.title = title ? title + ' - Home' : 'veypi project'
+  },
+  getCookie(name: string) {
+    const reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)')
+    const arr = document.cookie.match(reg)
+    if (arr) {
+      return unescape(arr[2])
+    } else return null
+  },
+  delCookie(name: string) {
+    const exp = new Date()
+    exp.setTime(exp.getTime() - 1)
+    const cval = this.getCookie(name)
+    if (cval !== null) {
+      document.cookie = name + '=' + cval + ';expires=' + exp.toLocaleString()
+    }
+  },
+  setCookie(name: string, value: string, time: number) {
+    const exp = new Date()
+    exp.setTime(exp.getTime() + time)
+    document.cookie =
+      name + '=' + escape(value) + ';expires=' + exp.toLocaleString()
+  },
+  checkLogin() {
+    // return parseInt(this.getCookie('stat')) === 1
+    return Boolean(localStorage.auth_token)
+  },
+
+  formatDate(date: Date, fmt: string) {
+    if (/(y+)/.test(fmt)) {
+      fmt = fmt.replace(
+        RegExp.$1,
+        (date.getFullYear() + '').substr(4 - RegExp.$1.length)
+      )
+    }
+    const o = {
+      'M+': date.getMonth() + 1,
+      'd+': date.getDate(),
+      'h+': date.getHours(),
+      'm+': date.getMinutes(),
+      's+': date.getSeconds()
+    }
+    for (const k in o) {
+      if (new RegExp(`(${k})`).test(fmt)) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+        // @ts-ignore
+        const str = o[k] + ''
+        fmt = fmt.replace(
+          RegExp.$1,
+          RegExp.$1.length === 1 ? str : padLeftZero(str)
+        )
+      }
+    }
+    return fmt
+  }
+}
+
+export default util
@@ -1,6 +1,9 @@
 import Vue from 'vue'
 import VueRouter, {RouteConfig} from 'vue-router'
 import Home from '../views/Home.vue'
+import Demo from '@/views/demo.vue'
+import Login from '@/views/login.vue'
+import Register from '@/views/register.vue'

 Vue.use(VueRouter)

@@ -11,12 +14,19 @@ const routes: Array<RouteConfig> = [
    component: Home
  },
  {
-    path: '/about',
-    name: 'About',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+    path: '/app',
+    name: 'app',
+    component: Demo
+  },
+  {
+    path: '/login',
+    name: 'login',
+    component: Login
+  },
+  {
+    path: '/register',
+    name: 'register',
+    component: Register
  },
  {
    path: '/wx',
@@ -1,3 +1,4 @@
+declare module '*.js'
 declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
@@ -5,6 +5,7 @@ Vue.use(Vuex)

 export default new Vuex.Store({
  state: {
+    user: null
  },
  mutations: {
  },
@@ -0,0 +1,14 @@
+// 1. 确保在声明补充的类型之前导入 'vue'
+import Vue from 'vue'
+import api from '@/api'
+
+export type PluginFunction<T> = (Vue: typeof Vue, options?: T) => void;
+
+// 2. 定制一个文件，设置你想要补充的类型
+//    在 types/vue.d.ts 里 Vue 有构造函数类型
+declare module 'vue/types/vue' {
+// 3. 声明为 Vue 补充的东西
+  interface Vue {
+    $api: typeof api;
+  }
+}
@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
@@ -0,0 +1,21 @@
+<style>
+</style>
+<template>
+  <div class='home d-flex justify-center align-center'>
+  </div>
+</template>
+
+<script lang='ts'>
+import {Component, Vue} from 'vue-property-decorator'
+
+@Component({
+  components: {}
+})
+export default class Demo extends Vue {
+  mounted() {
+  }
+
+  created() {
+  }
+}
+</script>
@@ -0,0 +1,116 @@
+<style>
+</style>
+<template>
+  <v-row align="center" class="fill-height" justify="center" style="background: #ebebeb">
+    <v-col cols="12" sm="8" md="6" lg="4" xl="3">
+      <v-card class="elevation-12 mx-5" style="opacity: 0.8">
+        <v-row justify="center">
+          <v-col cols="10">
+            <v-card class="elevation-1 mt-n12 primary theme--dark">
+              <v-card-text class="text-center">
+                <h1 class="display-2 font-weight-bold mb-2">Login</h1>
+                <v-tooltip left>
+                  <template v-slot:activator="{ on }">
+                  <v-btn icon large v-on="on">
+                    <v-icon>mdi-cellphone</v-icon>
+                  </v-btn>
+                  </template>
+                  <span style="font-family:'Noto Sans Armenian'">手机登录</span>
+                </v-tooltip>
+                <v-tooltip right>
+                  <template v-slot:activator="{ on }">
+                  <v-btn icon large v-on="on">
+                    <v-icon>mdi-barcode</v-icon>
+                  </v-btn>
+                  </template>
+                  <span>授权码登录</span>
+                </v-tooltip>
+              </v-card-text>
+            </v-card>
+          </v-col>
+        </v-row>
+        <v-card-text>
+          <v-form ref="form">
+            <v-text-field
+              v-model="formInline.user"
+              :counter="16"
+              :rules="ruleInline.user"
+              label="账号"
+              required
+              prepend-inner-icon="mdi-account-circle"
+            ></v-text-field>
+            <v-text-field
+              v-model="formInline.password"
+              type="password"
+              :counter="16"
+              :rules="ruleInline.password"
+              label="密码"
+              prepend-inner-icon="mdi-lock"
+              @keyup.enter="handleSubmit"
+              required
+            ></v-text-field>
+          </v-form>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer/>
+          <v-btn type="primary" @click="handleSubmit">登录</v-btn>
+          <router-link to="/register" style="text-decoration: none;">
+            <v-btn type="primary" style="margin-left:8px">注册</v-btn>
+          </router-link>
+        </v-card-actions>
+      </v-card>
+    </v-col>
+  </v-row>
+</template>
+
+<script lang='ts'>
+import {Component, Vue} from 'vue-property-decorator'
+import util from '@/libs/util'
+
+@Component({
+  components: {}
+})
+export default class Login extends Vue {
+  formInline = {
+    user: '',
+    password: ''
+  }
+
+  ruleInline = {
+    user: [
+      (v: string) => !!v || 'required',
+      (v: string) => (v && v.length >= 3 && v.length <= 16) || '长度要求3~16'
+    ],
+    password: [
+      (v: string) => !!v || 'required',
+      (v: string) => (v && v.length >= 6 && v.length <= 16) || '长度要求6~16'
+    ]
+  }
+
+  handleSubmit() {
+    this.$api.auth.login(this.formInline.user, this.formInline.password).Start(
+      data => {
+        if (util.checkLogin()) {
+          // this.$message.success('登录成功')
+          // EventBus.$emit('login', true)
+          this.$nextTick(() => {
+            this.$router.push({name: 'home'})
+          })
+        } else {
+          // this.$message.error('用户名或密码错误')
+        }
+      },
+      () => {
+        // this.$message.error('网络错误！')
+      }
+    )
+  }
+
+  mounted() {
+  }
+
+  created() {
+    console.log(this.formInline)
+  }
+}
+</script>
@@ -0,0 +1,118 @@
+<style>
+</style>
+<template>
+  <v-row class="fill-height" align="center" justify="center" style="background: #ebebeb">
+    <v-col cols="12" sm="8" md="6" lg="4" xl="3">
+      <v-card class="elevation-12 mx-5" style="opacity: 0.8">
+        <v-row justify="center">
+          <v-card class="elevation-1 mt-n7 primary" style="width: 80%">
+            <v-card-actions>
+              <v-row>
+                <v-icon
+                  style="position: absolute;left: 10px;top:19px;z-index: 1"
+                  @click="$router.back()"
+                  size="36"
+                >mdi-arrow-left-circle
+                </v-icon>
+                <v-col cols="12" class="text-center">
+                  <h1 class="display-2 ">注册</h1>
+                </v-col>
+              </v-row>
+            </v-card-actions>
+          </v-card>
+        </v-row>
+        <v-card-text class="text-center">
+          <v-form ref="form">
+            <v-text-field
+              type="text"
+              prepend-inner-icon="mdi-account-circle"
+              v-model="form.username"
+              label="账号"
+              :rules="ruleInline.user"
+              :counter="16"
+            >
+            </v-text-field>
+            <v-text-field
+              type="password"
+              v-model="form.passwd"
+              label="密码"
+              prepend-inner-icon="mdi-lock"
+              :rules="ruleInline.password"
+              :counter="16"
+            ></v-text-field>
+            <v-text-field
+              type="password"
+              v-model="form.passwdCheck"
+              label="密码"
+              prepend-inner-icon="mdi-lock"
+              :rules="ruleInline.passwordCheck"
+              :counter="16"
+              @keyup.enter="handleSubmit"
+            ></v-text-field>
+          </v-form>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn type="primary" @click="handleSubmit">提交</v-btn>
+          <v-btn @click="handleReset()">重置</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-col>
+  </v-row>
+</template>
+
+<script lang='ts'>
+import {Component, Vue} from 'vue-property-decorator'
+
+@Component({
+  components: {}
+})
+export default class Register extends Vue {
+  form = {
+    passwd: '',
+    passwdCheck: '',
+    email: '',
+    username: ''
+  }
+
+  ruleInline = {
+    user: [
+      (v: string) => !!v || 'required',
+      (v: string) => (v && v.length >= 3 && v.length <= 16) || '长度要求3~16'
+    ],
+    password: [
+      (v: string) => !!v || 'required',
+      (v: string) => (v && v.length >= 6 && v.length <= 16) || '长度要求6~16'
+    ],
+    passwordCheck: [
+      (v: string) => !!v || 'required',
+      (v: string) => (v && v === this.form.passwd) || '密码不一致'
+    ]
+  }
+
+  handleSubmit() {
+    if (!this.$refs.form.validate()) {
+      return
+    }
+    this.$api.user.register(this.form.username, this.form.passwd).Start(
+      (data) => {
+        // this.$message.success('注册成功!')
+        this.$router.push({name: 'login'})
+      },
+      (data) => {
+        if (data && data.code === '31011') {
+          // this.$message.error('用户名重复')
+        } else {
+          // this.$message.error('注册失败')
+        }
+      }
+    )
+  }
+
+  handleReset() {
+    this.form.username = ''
+    this.form.passwd = ''
+    this.form.passwdCheck = ''
+  }
+}
+</script>
@@ -52,7 +52,7 @@ export default class Wx extends Vue {

  created() {
    if (this.uuid) {
-      this.api.app.get(this.uuid).Start(e => {
+      this.$api.app.get(this.uuid as string).Start(e => {
        this.url = e.wx.url + '/api/wx/login/' + this.uuid
        this.aid = e.wx.corp_id
        this.agentID = e.wx.agent_id
@@ -10,7 +10,7 @@ module.exports = {
  outputDir: '../sub/static',
  devServer: {
    host: '0.0.0.0',
-    port: 19528,
+    port: 19520,
    disableHostCheck: true,
    proxy: {
      '^/api': {