【融职培训】Web前端学习 第9章 教务管理系统开发5 前端代码

一、导航守卫

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

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

二、封装请求方法

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

1import axios from "axios"23const service = axios.create({4baseURL: "http://127.0.0.1:7001/"5})6exportdefaultservice

三、登录请求功能

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

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

四、退出登录

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

1退出登录 2 3 4 5    quit() { 6localStorage.removeItem("token"); 7this.$router.replace("/"); 8console.log("已经执行删除token"); 9    },1011

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