Jason/league-explorer-typescript
1
0
Fork 0
forked from UzTech/Vue3-typescript-demo
Code Issues Pull Requests Projects Releases 1 Wiki Activity

集成登录功能到store中

Browse Source
This commit is contained in:
Jason.Chen
2021-09-17 17:30:14 +08:00
parent 2898a6362f
commit c708459ff3
13 changed files with 144 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
public/index.html
View File

@@ -1,17 +1,21 @@
<!DOCTYPE html>
<html lang="">
<head>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
/>
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

1
src/App.vue
View File

@@ -6,6 +6,7 @@
</router-view>
<router-link to="/">Home</router-link> |
<router-link to="/user">User</router-link> |
<router-link to="/auth/login">Login</router-link>
</template>

0
src/store/mutation-types.ts → src/config/index.ts
View File

6
src/router/index.ts
View File

@@ -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',

15
src/router/routers/user.ts Normal file
View File

@@ -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[]

18
src/store/index.ts
View File

@@ -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<Store<State>> = Symbol()
export interface State {
isLogin: boolean
userInfo: UserInfo
auth?: AuthState //这个是为了不报错用的
auth?: AuthState
refresh?: RefreshState
}
export default createStore<State>({
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
}
})

36
src/store/modules/auth.ts
View File

@@ -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<AuthState, State>
export type AuthState = typeof initState

29
src/store/modules/refresh.ts Normal file
View File

@@ -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<RefreshState, State>
export type RefreshState = typeof initState

4
src/types/router.d.ts vendored
View File

@@ -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[]

2
src/utils/request.ts
View File

@@ -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'

11
src/views/Auth/login.vue
View File

@@ -1,9 +1,20 @@
<template>
登录
<button @click="onLogin">一键登录</button>
</template>
<script lang="ts" setup>
import { useStore } from '@/store'
const store = useStore()
const onLogin = () => {
store.dispatch('auth/Login', { username: '15555555555', password: '123123' }).then(res => {
console.log('res', res)
}).catch(err => {
console.error('error', err)
})
}
</script>
<style scoped>

12
src/views/Home/index.vue
View File

@@ -1,18 +1,16 @@
<template>
<div class="home">
{{ counter }}
</div>
<button @click="store.commit('auth/login', '我是你爸爸')" class="">add</button>
</template>
<script lang="ts" setup>
import { useStore } from '@/store'
import { computed } from 'vue'
const store = useStore()
const counter = computed(() => store.state.auth.accessToken)
</script>
<script lang="ts">
export default {
name: 'Home'
}
</script>
<style scoped>
</style>

21
src/views/User/index.vue Normal file
View File

@@ -0,0 +1,21 @@
<template>
用户中心
</template>
<script lang="ts" setup>
import { useStore } from '@/store'
const store = useStore()
console.log(store.getters['refresh/user'])
store.dispatch('refresh/setUser', false)
</script>
<script lang="ts">
export default {
name: 'User'
}
</script>
<style scoped>
</style>