一、导航守卫
导航守卫主要用于实现在页面发生跳转时,检测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>