【融职培训】Web前端学习 第9章 教务管理系统开发5 前端代码讲解
【融职培训】Web前端学习 第9章 教务管理系统开发5 前端代码讲解
学习猿地
发布于 2020-07-08 18:37:01
发布于 2020-07-08 18:37:01
一、导航守卫
导航守卫主要用于实现在页面发生跳转时，检测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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-07-07 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录