邀请码绑定，注册基础流程

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "axios": "^0.21.4",
+    "qs": "^6.10.1",
     "store": "^2.0.12",
     "vue": "^3.2.11",
     "vue-router": "^4.0.11",

src/App.vue

@@ -10,15 +10,28 @@
   <router-link :to="{name:'User'}">User</router-link>
   |
   <router-link :to="{name:'AuthLogin'}">Login</router-link>
+  |
+  <router-link :to="{name:'AuthRegister'}">Register</router-link>
 </template>
 
 <script lang="ts" setup>
+import { INVITE_CODE } from '@/store'
+import qs from 'qs'
 import { ref, watch } from 'vue'
 import { RouteLocationNormalizedLoaded, useRoute } from 'vue-router'
 
 const includeList = ref<string[]>([])
 const route = useRoute()
 
+const { search } = location
+
+if (search && search.indexOf('?') !== -1) {
+  const { invite } = qs.parse(location.search.slice(1))
+  invite && localStorage.setItem(INVITE_CODE, invite)
+}
+
+// console.log(
+
 watch(route, (to: RouteLocationNormalizedLoaded) => {
   if (to.meta?.keepAlive && includeList.value.indexOf(to.name as string) === -1) {
     includeList.value.push(to.name as string)

src/api/interfaces/auth.ts

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

src/store/index.ts

@@ -1,12 +1,14 @@
-import { LoginResponse } from '@/types/auth'
-import { BaseInfo } from '@/types/user'
+import type { AuthResponse } from '@/types/auth'
+import type { BaseInfo } from '@/types/user'
 import { InjectionKey } from 'vue'
 import { createStore, Store, useStore as baseUseStore } from 'vuex'
 import createPersistedState from 'vuex-persistedstate'
 import auth, { AuthState } from './modules/auth'
 import refresh, { RefreshState } from './modules/refresh'
 
-export const PERSISTED_KEY = 'VUEX_PERSISTED'
+export const PERSISTED_KEY = 'vuex_persisted'
+export const INVITE_CODE = 'invite_code'
+
 export const key: InjectionKey<Store<State>> = Symbol()
 
 export interface State {
@@ -42,7 +44,7 @@ export default createStore<State>({
         }
     },
     mutations: {
-        setAccessToken (state: State, payload: LoginResponse) {
+        setAccessToken (state: State, payload: AuthResponse) {
             state.accessToken = payload.access_token
             state.tokenType = payload.token_type
             state.loginAt = Date.now()

src/store/modules/auth.ts

@@ -1,6 +1,6 @@
 import { auth, user } from '@/api'
 import { PERSISTED_KEY, State } from '@/store'
-import { LoginData } from '@/types/auth'
+import type { AuthData } from '@/types/auth'
 import { Module } from 'vuex'
 
 const initState = {}
@@ -10,12 +10,13 @@ export default {
     namespaced: true,
     state: initState,
     actions: {
-        Login: ({ commit }, payload: LoginData) => {
+        Login: ({ commit }, payload: AuthData) => {
             return new Promise((resolve, reject) => {
                 auth.login(payload).then(response => {
                     commit('setAccessToken', response, { root: true })
                     // 刷新用户中心页面
                     commit('refresh/setUser', true, { root: true })
+                    // 保存用户基础信息
                     user.info().then(info => {
                         commit('setUserInfo', info, { root: true })
                     })

src/types/auth.d.ts

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

src/types/user.d.ts

@@ -1,3 +1,4 @@
+// 用户基础信息
 export declare interface BaseInfo {
     user_id: number
     nickname: string

src/views/Auth/register.vue

@@ -1,10 +1,27 @@
 <template>
-注册
+  注册
+
+  <h2>邀请码： {{ invite }}</h2>
+
+  <button @click="onRegister">注册一个号</button>
 </template>
 
-<script>
-export default {
-  name: 'register'
+<script lang="ts" setup>
+import { auth } from '@/api'
+import { INVITE_CODE } from '@/store'
+
+const invite = localStorage.getItem(INVITE_CODE)
+
+const onRegister = () => {
+  auth.register({
+    username: '15512341112',
+    password: '111111',
+    invite: invite
+  }).then(res => {
+    console.log(res)
+  }).catch(err => {
+    alert(err.message)
+  })
 }
 </script>
 

yarn.lock

@@ -7263,6 +7263,13 @@ qs@6.7.0:
   resolved "https://registry.nlark.com/qs/download/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
   integrity sha1-QdwaAV49WB8WIXdr4xr7KHapsbw=
 
+qs@^6.10.1:
+  version "6.10.1"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.1.tgz#4931482fa8d647a5aab799c5271d2133b981fb6a"
+  integrity sha512-M528Hph6wsSVOBiYUnGf+K/7w0hNshs/duGsNXPUCLH5XAqjEtiPGwNONLV0tBH8NoGb0mvD5JubnUTrujKDTg==
+  dependencies:
+    side-channel "^1.0.4"
+
 qs@~6.5.2:
   version "6.5.2"
   resolved "https://registry.nlark.com/qs/download/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"