【融职培训】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
