一年经验的全栈程序员，目前头发健在，但不知道能撑多久。
目录
前言
上一篇文章我们学习了如何创建前端项目并且配置一些样式依赖Tailwind CSS、Element plus，以及路由配置的建立，和登录页面的编写。
这一篇我们将完成Element plus图标的导入和axios依赖添加，登录接口的封装，以及解决前后端跨域的问题。
上一篇的地址手把手教你写毕设-前端篇-day01
一、Element plus图标导入
命令行输入
npm install @element-plus/icons-vue
然后在src/main.js文件把图标引入
import '../src/assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
// 导入路由
import router from './router'
// 导入 Element Plus 图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
// 引入图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
// 应用路由
app.use(router)
app.mount('#app')启动项目就可以看到登录页面以及有图标显示了，这种方式的图标导入是全局的，因为main.js的页面的主js文件
登录页src/pages/login.vue里面上一篇文章我们就以及把图标写入了prefix-icon="User"
<!-- 用户名输入框 -->
<el-form-item prop="username">
<el-input
v-model="loginForm.username"
placeholder="请输入账号"
prefix-icon="User"
clearable
/>
</el-form-item>
<!-- 密码输入框 -->
<el-form-item prop="password">
<el-input
v-model="loginForm.password"
placeholder="请输入密码"
prefix-icon="Lock"
show-password
clearable
/>
</el-form-item>二、Axios安装和使用
1. 安装Axios
命令行输入
npm install axios
安装完成
2. 封装Axios
在目录src下新建一个文件夹util存放一些公共的实例或者方法，并且创建axios.js文件
axios.js文件代码如下
import axios from "axios";
// 创建 Axios 实例
const http_axios = axios.create({
baseURL: "api",
timeout: 7000, // 请求超时时间
})
// 暴露出去
export default http_axios;3. 登录接口
在src目录下面创建api文件夹用来专门放接口的。
在api里面建立一些login.js的文件，登录接口放在里面
login.js代码内容
//导入axios的实例
import axios from "../util/axios";
// 登录接口
export function login(username, password) {
return axios.post("/login", {username, password})
}4. 跨域解决
跨域问题（Cross-Origin Issues）是Web开发中常见的安全限制，指的是浏览器出于安全考虑，阻止网页从一个源（origin）向另一个不同的源发起请求的行为。
大家仔细观察可以看到前端应用启动时候端口是5173
后端启动的端口也不一样，所以这时候就需要继续跨域处理 。
其实vue官网的解决方案就是打开根目录下的vite.config.js加入
server: {
proxy: {
'/api': {
target: 'http://localhost:9090',// 你的后端接口API地址
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},
}
},
三、登录页面的完善
1. 登录成功失败弹窗提示
登录的用户名和密码先写固定后期我们在开发后端，在login.vue文件下面找到登录按钮的方法handleLogin，加上代码
// 登录处理函数
const handleLogin = () => {
loginFormRef.value.validate(valid => {
if (valid) {
if (loginForm.value.username === "admin" && loginForm.value.password === '123456') {
ElMessage({
message: '登录成功',
type: 'success'
});
} else {
ElMessage({
message: '用户名或密码错误',
type: 'error'
});
}
}
})
} 这样就完成了
2. 页面跳转
登录成功我们需要进行页面跳转
首先我们需要在pages页面文件夹下面创建index.vue首页页面
接下来需要在router/index.js文件下面把这个页面的路由添加进去
import { createRouter, createWebHashHistory } from 'vue-router'
import Login from '../pages/login.vue'
import Index from '../pages/index.vue'
//这里是声明所有路由
const routes = [
{
path: '/login', // 路由地址
component: Login, // 对应组件
meta: { // meta 信息
title: '登录页' // 页面标题
}
},
{
path: '/', // 路由地址
component: Index, // 对应组件
meta: { // meta 信息
title: '首页' // 页面标题
}
}
]
// 创建路由
const router = createRouter({
// 指定路由的历史管理方式，hash 模式指的是 URL 的路径是通过 hash 符号（#）进行标识
history: createWebHashHistory(),
routes,
})
// 导出语句，将 router 对象导出，以便其他文件可以导入和使用这个对象
export default router在登录成功时候我们需要进行页面跳转，所以打开login.vue文件添加路由跳转代码
......
import { useRouter } from 'vue-router';
const router = useRouter()
......
// 登录处理函数
const handleLogin = () => {
loginFormRef.value.validate(valid => {
if (valid) {
if (loginForm.value.username === "admin" && loginForm.value.password === '123456') {
ElMessage({
message: '登录成功',
type: 'success'
});
//路由跳转到首页
router.push('/')
} else {
ElMessage({
message: '用户名或密码错误',
type: 'error'
});
}
}
})
}四、路由守卫
路由守卫是 Vue Router 提供的一种机制，允许你在路由导航过程中插入钩子函数，用于控制导航行为或执行特定操作。路由守卫主要分为三类：全局守卫、路由独享守卫和组件内守卫。
大家可以看到每次启动项目他默认访问http://localhost:5173/#/这个路径，不会直接访问登录页面，这时候我们就需要通过全局路由守卫进行页面跳转逻辑判断。
1. Cookie是什么
Cookie 是网站存储在用户浏览器中的小型文本数据，用于跟踪和识别用户状态。它是 Web 开发中重要的客户端存储机制之一。
简单来说我们后端登录成功会返回一个Token到前端进行校验判断是否登录成功以及后续的一些认证。
随便打开一个网站按住F12就可以打开开发者工具可以看到网页的cookie
2. VueUse
VueUse 是一个基于 Composition API 的 Vue 工具函数集合，提供了大量实用的可组合函数（composable functions），帮助开发者更高效地构建 Vue 应用。
简单来说VueUse可以操控一些方法对网页的cookie进行增删改查。
🆗经过上面的介绍，我们将使用VueUse进行登录成功得到的Token存放网页的cookie里面。
3. 使用VueUse
命令行输入
npm i @vueuse/integrations
npm i universal-cookie
这里为什么要安装 universal-cookie？，因为对网页的cookie的操作封装在vueuse里面，有兴趣的可以打开安装好的自行查看。
安装完成，我们需要在src/composables文件夹下面创建一个auth.js文件，封装操作cookie的方法
import { useCookies } from '@vueuse/integrations/useCookies'
// 存储在 Cookie 中的 Token 的 key
const TOKEN_KEY = 'Authorization'
const cookie = useCookies()
// 获取 Token 值
export function getToken() {
return cookie.get(TOKEN_KEY)
}
// 设置 Token 到 Cookie 中
export function setToken(token) {
return cookie.set(TOKEN_KEY, token)
}
// 删除 Token
export function removeToken() {
return cookie.remove(TOKEN_KEY)
}
在登录成功里面我们保存一个自定义的token先
.....
//导入方法
import { setToken } from '../composables/auth'
.....
// 登录处理函数
const handleLogin = () => {
loginFormRef.value.validate(valid => {
if (valid) {
if (loginForm.value.username === "admin" && loginForm.value.password === '123456') {
ElMessage({
message: '登录成功',
type: 'success'
});
//保存Token
setToken("abcdefghijklnm")
//路由跳转到首页
router.push('/')
} else {
ElMessage({
message: '用户名或密码错误',
type: 'error'
});
}
}
})
}
</script>运行项目，可以看到外面的token保存成功
4. 全局路由拦截
这一步我们需要完成前面开头说的这个问题
大家可以看到每次启动项目他默认访问http://localhost:5173/#/这个路径，不会直接访问登录页面，这时候我们就需要通过全局路由守卫进行页面跳转逻辑判断。
在src/util文件夹下创建permission.js，放全局路由守卫的代码
// 导入路由实例 - 从router目录下的index.js文件中导入已经配置好的路由实例
import router from '../router/index'
// 导入获取token的工具函数 - 从composables/auth.js中导入getToken方法
import { getToken } from '../composables/auth'
// 全局路由前置守卫
// 每次路由跳转前都会执行这个回调函数
router.beforeEach((to, from, next) => {
// 打印日志，方便调试
console.log('==> 全局路由前置守卫')
// 从本地存储中获取用户token
let token = getToken()
// 检查用户是否未登录（token不存在）并且路径不是login
if (!token && to.path !== '/login') {
// 使用Element Plus的消息组件提示用户需要登录
ElMessage({
message: '请先登录',
type: 'warning'
});
// 如果用户未登录，则重定向到登录页面
// 注意：这里使用了path而不是name，确保即使路由配置改变也能正确跳转
next({ path: '/login' })
} else {
// 如果用户已登录，则放行，继续正常导航
next()
}
/*
* 补充说明：
* 1. to: 即将要进入的目标路由对象
* 2. from: 当前导航正要离开的路由对象
* 3. next: 必须调用此方法来resolve这个钩子
* - next(): 进行管道中的下一个钩子
* - next(false): 中断当前导航
* - next('/path'): 跳转到一个不同的地址
*/
})
// 全局路由后置守卫
// 路由跳转完成后执行（没有next参数，不会影响导航）
router.afterEach((to, from) => {
/*
* 动态设置页面标题
* 逻辑：如果路由元信息中有title字段，则使用它，否则使用空字符串
* 然后统一加上" - Weblog"后缀
*/
let title = (to.meta.title ? to.meta.title : '')
// 修改文档标题
document.title = title
/*
* 补充说明：
* 1. 这里可以添加其他后置操作，如：
* - 页面访问统计
* - 滚动回顶部
* - 关闭加载动画等
* 2. 与beforeEach不同，afterEach没有next参数，因为导航已经完成
*/
})进行在主js文件main.js加入路由注册
..............
// 导入路由
import router from './router'
// 导入全局路由守卫
import '../src/util/permission'
...............删除刚刚哪个cookie里面的值刷新页面就可以看到
总结
本文我们将上一篇文章的登录页面进行完善，并且讲解了Axios发送网络请求和跨域问题的解决，以及全局路由的的使用等。后续的后端等把前端页面完善进行编写。
🙌 求点赞、收藏、关注！
如果这篇文章对你有帮助，不妨：
👍 点个赞 → 让更多人看到这篇干货！
⭐ 收藏一下 → 方便以后随时查阅！
🔔 加关注 → 获取更多 前端/后端/全栈技术深度解析！
你的支持，是我持续创作的最大动力！ 🚀
扫一扫
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
