init

src/App.vue

@@ -0,0 +1,27 @@
+<template>
+  <router-view v-slot="{ Component }">
+    <keep-alive :include="includeList">
+      <component :is="Component"></component>
+    </keep-alive>
+  </router-view>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+import { RouteLocationNormalizedLoaded, useRoute } from 'vue-router'
+
+const includeList = ref<string[]>([])
+const route = useRoute()
+
+watch(route, (to: RouteLocationNormalizedLoaded) => {
+  if (to.meta?.keepAlive && includeList.value.indexOf(to.name as string) === -1) {
+    includeList.value.push(to.name as string)
+  }
+})
+</script>
+
+<style lang="less">
+body {
+  background: #f7f8fa;
+}
+</style>

src/api/index.ts

@@ -0,0 +1,5 @@
+import auth from '@/config/interfaces/auth'
+
+export {
+    auth
+}

src/config/interfaces/auth.ts

@@ -0,0 +1,15 @@
+import type { LoginData, LoginResponse } from '@/types/auth'
+import request from '@/utils/request'
+
+const login = (data: LoginData): Promise<LoginResponse> => {
+    return request.post('user/auth/login', data)
+}
+
+const register = (data: LoginData): Promise<LoginResponse> => {
+    return request.post('user/auth/register', data)
+}
+
+export default {
+    login,
+    register
+}

src/config/routers/auth.ts

@@ -0,0 +1,24 @@
+import type { MyRouteRecordRaw } from '@/types/router';
+
+export default [
+    {
+        path: '/auth/login',
+        name: 'AuthLogin',
+        meta: {
+            title: '用户登录',
+            requiresAuth: false,
+            keepAlive: false
+        },
+        component: () => import(/* webpackChunkName: "auth" */ '@/views/Auth/login.vue')
+    },
+    {
+        path: '/auth/register',
+        name: 'AuthRegister',
+        meta: {
+            title: '用户注册',
+            requiresAuth: false,
+            keepAlive: false
+        },
+        component: () => import(/* webpackChunkName: "auth" */ '@/views/Auth/register.vue')
+    }
+] as MyRouteRecordRaw[]

src/main.ts

@@ -0,0 +1,10 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+
+const app = createApp(App)
+
+app.use(store)
+app.use(router)
+app.mount('#app')

src/router/index.ts

@@ -0,0 +1,92 @@
+import auth from '@/config/routers/auth'
+import { ACCESS_TOKEN } from '@/store/mutation-types'
+import type { MyRouteMeta, MyRouteRecordRaw } from '@/types/router'
+import store from 'store'
+import { createRouter, createWebHistory } from 'vue-router'
+
+/**
+ * 定义基础路由
+ */
+const routes: MyRouteRecordRaw[] = [
+    {
+        path: '/',
+        name: 'Home',
+        meta: {
+            title: '首页',
+            keepAlive: true
+        },
+        component: () => import(/* webpackChunkName: "home" */ '@/views/Home/index.vue')
+    },
+    ...auth,
+    {
+        path: '/404',
+        name: 'NotFound',
+        component: () => import(/* webpackChunkName: "home" */ '@/views/404.vue'),
+        meta: {
+            title: '页面不存在',
+            keepAlive: true
+        }
+    },
+    {
+        path: '/:pathMatch(.*)*',
+        name: 'Miss',
+        redirect: '/404'
+    }
+]
+
+/**
+ * 创建路由
+ */
+const router = createRouter({
+    history: createWebHistory(),
+    routes
+})
+
+/**
+ * 路由守卫
+ */
+router.beforeEach((to, from, next) => {
+    typeof to.meta !== 'undefined' && setDocumentTitle(<MyRouteMeta>to.meta)
+
+    const isAuthenticated: string = store.get(ACCESS_TOKEN)
+
+    if (to.name !== 'AuthLogin' && to.meta.requiresAuth && !isAuthenticated) {
+        next({ name: 'AuthLogin', query: { to: to.path } })
+    } else {
+        next()
+    }
+})
+
+/**
+ * 设置文档标题
+ * @param meta MyRouteMeta
+ */
+function setDocumentTitle (meta: MyRouteMeta) {
+    document.title = meta?.title
+    const ua = navigator.userAgent
+    // eslint-disable-next-line
+    const regex = /\bMicroMessenger\/([\d\.]+)/
+    if (regex.test(ua) && /ip(hone|od|ad)/i.test(ua)) {
+        const i = document.createElement('iframe')
+        i.src = '/favicon.ico'
+        i.style.display = 'none'
+        i.onload = function () {
+            setTimeout(function () {
+                i.remove()
+            }, 9)
+        }
+        document.body.appendChild(i)
+    }
+}
+
+/**
+ * 离开页面后返回顶部
+ */
+router.afterEach((to, from) => {
+    // 只有定义了 scrollToTop:false 的页面，才不滚到顶部，默认都到顶
+    if (from.meta?.scrollToTop !== false) {
+        window.scrollTo(0, 0)
+    }
+})
+
+export default router

src/shims-vue.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable */
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

src/store/index.ts

@@ -0,0 +1,12 @@
+import { createStore } from 'vuex'
+
+export default createStore({
+  state: {
+  },
+  mutations: {
+  },
+  actions: {
+  },
+  modules: {
+  }
+})

src/store/mutation-types.ts

@@ -0,0 +1 @@
+export const ACCESS_TOKEN = 'Access-Token'

src/types/auth.d.ts

@@ -0,0 +1,11 @@
+export declare type LoginData = {
+    username: string;
+    password: string;
+    verify?: number;
+    invite?: string;
+}
+
+export declare type LoginResponse = {
+    access_token: string;
+    token_type: string;
+}

src/types/router.d.ts

@@ -0,0 +1,15 @@
+import { RouteMeta, RouteRecordRaw } from 'vue-router'
+
+export declare type MyRouteMeta = RouteMeta & {
+    title: string
+    keepAlive?: boolean
+    requiresAuth?: boolean
+    scrollToTop?: boolean
+    transition?: string
+}
+
+export declare type MyRouteRecordRaw = RouteRecordRaw & {
+    name?: string
+    meta?: MyRouteMeta
+    children?: MyRouteRecordRaw[]
+}

src/utils/filters.ts

@@ -0,0 +1,44 @@
+/**
+ * 秒，转化为时间格式 100 => 01:40
+ * @param time
+ */
+const numberToTime = (time: number) => {
+    let timeStr = ''
+    const stringFormat = (i: number) => {
+        return i < 10 ? `0${i}` : `${i}`
+    }
+    let minuteTime = 0
+    let secondTime = 0
+    let hourTime = 0
+    if (time < 60) {
+        timeStr = `00:${stringFormat(time)}`
+    } else if (time >= 60 && time < 3600) {
+        minuteTime = Math.ceil(time / 60)
+        secondTime = time % 60
+        timeStr = `${stringFormat(minuteTime)}:${stringFormat(secondTime)}`
+    } else if (time >= 3600) {
+        const _t = time % 3600
+        hourTime = Math.ceil(time / 3600)
+        minuteTime = Math.ceil(_t / 60)
+        secondTime = _t % 60
+        timeStr = `${stringFormat(hourTime)}:${stringFormat(minuteTime)}:${stringFormat(secondTime)}`
+    }
+    return timeStr
+}
+
+/**
+ * 隐藏手机号中间位数
+ * @param str   要修改的字符串
+ * @param start 开始位置隐藏几位
+ * @param end   末端隐藏位数
+ */
+const hideMiddle = (str: string, start?: number, end?: number) => {
+    start = start || 3
+    end = end || 4
+    return str.substr(0, start) + '***' + str.substr(-end)
+}
+
+export {
+    numberToTime,
+    hideMiddle
+}

src/utils/request.ts

@@ -0,0 +1,45 @@
+import { ACCESS_TOKEN } from '@/store/mutation-types'
+import axios, { AxiosRequestConfig } from 'axios'
+import store from 'store'
+import router from '../router'
+
+const request = axios.create({
+    baseURL: process.env.VUE_APP_API_URL,
+    timeout: 5000
+})
+
+/**
+ * 请求的配置
+ * @param config
+ */
+const axiosConf = (config: AxiosRequestConfig) => {
+    config.headers.Authorization = store.get(ACCESS_TOKEN)
+    config.headers.Accept = 'application/json'
+    return config
+}
+
+/**
+ * 请求之前的拦截器，如果配置直接放在create中，会导致无法获取到 access_token 的问题
+ */
+request.interceptors.request.use(axiosConf, err => {
+    return Promise.reject(err)
+})
+
+/**
+ * 返回拦截器
+ */
+request.interceptors.response.use(async (response) => {
+    if (response.status === 401 || response.data?.status_code === 401) {
+        await router.push({ name: 'AuthLogin' })
+    }
+
+    if (response.status === 200 && response.data?.status_code === 200) {
+        return response.data?.data
+    }
+
+    return Promise.reject(response.data)
+}, () => {
+    return Promise.reject('网络请求超时')
+})
+
+export default request

src/views/404.vue

@@ -0,0 +1,13 @@
+<template>
+  404
+</template>
+
+<script>
+export default {
+  name: '404'
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Auth/login.vue

@@ -0,0 +1,13 @@
+<template>
+  登录
+</template>
+
+<script>
+export default {
+  name: 'login'
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Auth/register.vue

@@ -0,0 +1,13 @@
+<template>
+注册
+</template>
+
+<script>
+export default {
+  name: 'register'
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Home/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="home">
+  </div>
+</template>
+
+<script lang="ts" setup>
+</script>
+
+<style scoped>
+
+</style>