好的，下面我为你提供一个简单的示例代码：
首先，我们需要在项目中安装需要的依赖：
```
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: {
req
uiresAuth: true,
},
},
{
path: "/login",
name: "Login",
component: Login,
},
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
router.beforeEach((to, from, next) => {
const req
uiresAuth = to.matched.some((record) => record.meta.req
uiresAuth);
if (req
uiresAuth && !store.state.auth.isLoggedIn) {
next("/login");
} else {
next();
}
});
export default router;
```
现在，你可以通过访问 `/login` 路径来尝试进行登录了。如果登录成功，你将被重定向到 `/` 路径，否则会提示错误信息。
882
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
