vue3 + typescript +json-server +axios 写一个登录功能
时间: 2023-09-13 16:08:24 浏览: 56
好的,下面我为你提供一个简单的示例代码:
首先,我们需要在项目中安装需要的依赖:
```
npm install vue@next vue-router@next vuex@next axios json-server --save
npm install --save-dev typescript @types/node @types/vue @types/vue-router @types/vuex
```
接下来,我们先创建一个 `api.ts` 文件来处理登录请求:
```typescript
import axios from "axios";
export const login = (username: string, password: string) =>
axios.post("/api/login", { username, password });
```
然后在 `main.ts` 中初始化 `axios`:
```typescript
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import axios from "axios";
axios.defaults.baseURL = "http://localhost:3000";
createApp(App)
.use(store)
.use(router)
.mount("#app");
```
接着,在 `store` 目录下创建一个 `auth.ts` 文件来管理用户登录状态:
```typescript
import { Module } from "vuex";
import { login } from "../api";
interface AuthState {
isLoggedIn: boolean;
username: string;
}
const authModule: Module<AuthState, any> = {
namespaced: true,
state: {
isLoggedIn: false,
username: "",
},
mutations: {
login(state, username: string) {
state.isLoggedIn = true;
state.username = username;
},
logout(state) {
state.isLoggedIn = false;
state.username = "";
},
},
actions: {
async login({ commit }, { username, password }) {
try {
const response = await login(username, password);
commit("login", response.data.username);
} catch (error) {
console.error(error);
throw error;
}
},
logout({ commit }) {
commit("logout");
},
},
};
export default authModule;
```
最后,在 `views` 目录下创建一个 `Login.vue` 文件,用于用户登录:
```vue
<template>
<div>
<form @submit.prevent="login">
<label>
Username:
<input type="text" v-model="username" />
</label>
<label>
Password:
<input type="password" v-model="password" />
</label>
<button type="submit">Submit</button>
</form>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { useStore } from "vuex";
export default defineComponent({
name: "Login",
setup() {
const store = useStore();
const username = ref("");
const password = ref("");
const login = async () => {
try {
await store.dispatch("auth/login", { username: username.value, password: password.value });
router.push("/");
} catch (error) {
console.error(error);
alert("Error logging in, please try again.");
}
};
return {
username,
password,
login,
};
},
});
</script>
```
最后,在 `router` 目录下定义路由:
```typescript
import { createRouter, createWebHistory } from "vue-router";
import Home from "../views/Home.vue";
import Login from "../views/Login.vue";
import { store } from "../store";
const routes = [
{
path: "/",
name: "Home",
component: Home,
meta: {
requiresAuth: true,
},
},
{
path: "/login",
name: "Login",
component: Login,
},
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
router.beforeEach((to, from, next) => {
const requiresAuth = to.matched.some((record) => record.meta.requiresAuth);
if (requiresAuth && !store.state.auth.isLoggedIn) {
next("/login");
} else {
next();
}
});
export default router;
```
现在,你可以通过访问 `/login` 路径来尝试进行登录了。如果登录成功,你将被重定向到 `/` 路径,否则会提示错误信息。