diff --git a/public/index.html b/public/index.html index 3e5a139..3476b78 100644 --- a/public/index.html +++ b/public/index.html @@ -1,17 +1,21 @@ - + - + <%= htmlWebpackPlugin.options.title %> - - - -
- - + + + +
+ + diff --git a/src/App.vue b/src/App.vue index e0fa93e..b812f14 100644 --- a/src/App.vue +++ b/src/App.vue @@ -6,6 +6,7 @@ Home | + User | Login diff --git a/src/store/mutation-types.ts b/src/config/index.ts similarity index 100% rename from src/store/mutation-types.ts rename to src/config/index.ts diff --git a/src/router/index.ts b/src/router/index.ts index e2a3342..5000f5c 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,8 +1,9 @@ -import auth from '@/router/routers/auth' -import { ACCESS_TOKEN } from '@/store/mutation-types' +import { ACCESS_TOKEN } from '@/config' import type { MyRouteMeta, MyRouteRecordRaw } from '@/types/router' import store from 'store' import { createRouter, createWebHistory } from 'vue-router' +import auth from './routers/auth' +import user from './routers/user' /** * 定义基础路由 @@ -19,6 +20,7 @@ const routes: MyRouteRecordRaw[] = [ component: () => import(/* webpackChunkName: "home" */ '@/views/Home/index.vue') }, ...auth, + ...user, { path: '/404', name: 'NotFound', diff --git a/src/router/routers/user.ts b/src/router/routers/user.ts new file mode 100644 index 0000000..01ef00f --- /dev/null +++ b/src/router/routers/user.ts @@ -0,0 +1,15 @@ +import type { MyRouteRecordRaw } from '@/types/router' + +export default [ + { + path: '/user', + name: 'User', + meta: { + title: '用户中心', + keepAlive: true, + requiresAuth: true, + showTabBar: true + }, + component: () => import(/* webpackChunkName: "auth" */ '@/views/User/index.vue') + } +] as MyRouteRecordRaw[] diff --git a/src/store/index.ts b/src/store/index.ts index 2171852..92a25b4 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -2,32 +2,32 @@ import { UserInfo } from '@/types/user' import { InjectionKey } from 'vue' import { createStore, Store, useStore as baseUseStore } from 'vuex' import auth, { AuthState } from './modules/auth' +import refresh, { RefreshState } from './modules/refresh' +/** + * 这个KEY，是为了针对 state 的类型提示来用的 + */ export const key: InjectionKey> = Symbol() export interface State { isLogin: boolean userInfo: UserInfo - auth?: AuthState //这个是为了不报错用的 + auth?: AuthState + refresh?: RefreshState } export default createStore({ strict: true, state: { isLogin: false, - userInfo: { - level: 0, - user_id: 0, - nickname: '', - username: '', - avatar: 'string' - } + userInfo: {} as UserInfo }, getters: {}, mutations: {}, actions: {}, modules: { - auth + auth, + refresh } }) diff --git a/src/store/modules/auth.ts b/src/store/modules/auth.ts index bbecfcf..e7da166 100644 --- a/src/store/modules/auth.ts +++ b/src/store/modules/auth.ts @@ -1,22 +1,50 @@ +import { auth } from '@/api' import { State } from '@/store' +import { LoginData, LoginResponse } from '@/types/auth' import { Module } from 'vuex' const initState = { accessToken: '', + accessType: '', isLogin: false } export default { + strict: true, namespaced: true, state: initState, - getters: {}, mutations: { - login (state: AuthState, payload: string) { - state.accessToken = payload + login (state: AuthState, payload: LoginResponse) { + state.accessToken = payload.access_token + state.accessType = payload.token_type state.isLogin = true + }, + logout (state: AuthState) { + state.accessToken = '' + state.accessType = '' + state.isLogin = false } }, - actions: {} + actions: { + Login: ({ commit }, payload: LoginData) => { + return new Promise((resolve, reject) => { + auth.login(payload).then(response => { + commit('login', response) + commit('refresh/setUser', true, { root: true }) + resolve(response) + }).catch(error => { + reject(error) + }) + }) + }, + // 登出 + Logout ({ commit }) { + return new Promise((resolve) => { + commit('logout') + resolve(true) + }) + } + } } as Module export type AuthState = typeof initState diff --git a/src/store/modules/refresh.ts b/src/store/modules/refresh.ts new file mode 100644 index 0000000..c650842 --- /dev/null +++ b/src/store/modules/refresh.ts @@ -0,0 +1,29 @@ +import { State } from '@/store' +import { Module } from 'vuex' + +const initState = { + userRefresh: false +} + +export default { + strict: true, + namespaced: true, + state: initState, + getters: { + user: (state: RefreshState): boolean => { + return state.userRefresh + } + }, + mutations: { + setUser: (state: RefreshState, payload: boolean) => { + state.userRefresh = payload + } + }, + actions: { + setUser: ({ commit }, payload: boolean) => { + commit('setUser', payload) + } + } +} as Module + +export type RefreshState = typeof initState diff --git a/src/types/router.d.ts b/src/types/router.d.ts index 893e38b..8598b0a 100644 --- a/src/types/router.d.ts +++ b/src/types/router.d.ts @@ -1,6 +1,6 @@ import { RouteMeta, RouteRecordRaw } from 'vue-router' -export declare interface MyRouteMeta extends RouteMeta { +export declare type MyRouteMeta = RouteMeta & { title: string keepAlive?: boolean requiresAuth?: boolean @@ -9,7 +9,7 @@ export declare interface MyRouteMeta extends RouteMeta { transition?: string } -export declare interface MyRouteRecordRaw extends RouteRecordRaw { +export declare type MyRouteRecordRaw = RouteRecordRaw & { name?: string meta?: MyRouteMeta children?: MyRouteRecordRaw[] diff --git a/src/utils/request.ts b/src/utils/request.ts index 14ce408..6d4b943 100644 --- a/src/utils/request.ts +++ b/src/utils/request.ts @@ -1,4 +1,4 @@ -import { ACCESS_TOKEN } from '@/store/mutation-types' +import { ACCESS_TOKEN } from '@/config' import axios, { AxiosRequestConfig } from 'axios' import store from 'store' import router from '../router' diff --git a/src/views/Auth/login.vue b/src/views/Auth/login.vue index aea0440..1bdc67e 100644 --- a/src/views/Auth/login.vue +++ b/src/views/Auth/login.vue @@ -1,9 +1,20 @@ diff --git a/src/views/User/index.vue b/src/views/User/index.vue new file mode 100644 index 0000000..19548fd --- /dev/null +++ b/src/views/User/index.vue @@ -0,0 +1,21 @@ + + + + + + +