「融职培训」Web前端学习 第9章 教务管理系统开发5 前端代码讲解

一、导航守卫

导航守卫主要用于实现在页面发生跳转时，检测token的存在，如果token没有或失效，网页则回到登录页面，代码如下。

 1 router.beforeEach((to, from, next) => {
 2   let token = localStorage.getItem("token");
 3   console.log(token)
 4   if (token || to.path === "/") {
 5       next();
 6   } else {
 7       next({
 8           path:"/"
 9       });
10   }
11 })

二、封装请求方法

在教务管理系统中，我们需要自己封装请求方法，以完成一些麻烦的任务，封装的代码如下。

1 import axios from "axios"
2 
3 const service = axios.create({
4     baseURL: "http://127.0.0.1:7001/"
5 })
6 export default service

三、登录请求功能

在登录的过程中，我们需要向后台发送数据，并对后台传的数据，进行判断，以做出各种网页的效果，代码如下所示。

 1     login() {
 2       request({
 3         url:"/login",
 4         method:'post',
 5         data:this.dataQ
 6       }).then(res => {
 7         console.log(res)
 8             if (res.data.data == "密码错误！" ) {
 9               alert("密码错误！");
10             };
11             if (res.data.data == "用户不存在") {
12               alert("用户不存在");   
13             };
14             if (res.data.code == 20000 ) {
15               localStorage.setItem("token",res.data)
16               this.$router.push("/Class");
17               console.log(res.data)
18             };
19           })
20           .catch(err => {
21             console.log(err);
22           });
23     }

四、退出登录

在教务管理系统中，有一个退出登录的按钮，点击他时，就会自动退出登录状态，并返回至登录页面，代码如下所示。

 1 <el-button type="danger" @click="quit">退出登录</el-button>
 2 
 3 <script>
 4 
 5     quit() {
 6       localStorage.removeItem("token");
 7       this.$router.replace("/");
 8       console.log("已经执行删除token");
 9     },
10 
11 </script>

【融职教育】在工作中学习，在学习中工作