Vue封装一个Token全局登录代码

缺乏、安全感 2021-07-24 23:44 569阅读 0赞

## 我们先理清一下思路 ##

> 先在路由中设置一个全局路由  
> 判断如果没有获取token就只能返回登录

**在先router.js中写**

router.beforeEach((to, from, next) => { 
      //判断是否有token
      var token = localStorage.getItem("token")
      if (to.name === "Login") { 
        //这里判断是不是login页面
        next()
      } else { 
        //在判断一次有token就直接放行 
        //如果没有就返回login页面
        if (token) { 
          next()
        } else { 
          next("/login")
        }
      }
    })

**因为这里已经设置好无论去那个页面没有登录只能返回Login.vue登录页**  
**我们看下演示效果**  
![在这里插入图片描述][20200911173348663.gif_pic_center]

> 这里免费提供一个测试的api  
> https://www.showdoc.com.cn/yangks?page\_id=5183958480026060  
> 这个也是有退出接口的  
> 只有一个默认的账号密码  
> 账号跟密码是一样的  
> 账号admin  
> 密码admin

**在创建Login.vue**

<template>
      <div>
        <div class="box">
            <p>快点登录</p>
          <el-input placeholder="请输入内容" v-model="username" clearable></el-input>
          <el-input placeholder="请输入密码" v-model="password" show-password></el-input>
          <el-button type="primary" @click="abb">立即登录</el-button>
        </div>
      </div>
    </template>
    
    <script>
    import axios from "axios"; export default { 
      data() { 
        return { 
          username: "",
          password: "",
        };
      }, methods: { 
        abb() { 
          axios .post("http://ceshi5.dishait.cn/admin/login", { 
              username: this.username,
              //判断账号密码是否存在
              //如果存在 返回一个token
              //如果不存在 就返回失败
              password: this.password,
            }) .then((res) => { 
              var token = res.data.data.token;
              //把获取的token 保存在本地
              localStorage.setItem("token", token);
              alert("登录成功");
              this.$router.push("/");
            }) .catch((err) => { 
              alert("登录失败");
            });
        },
      },
    };
    </script>

**然后在看下演示效果**  
![在这里插入图片描述][20200911173749793.gif_pic_center]

[20200911173348663.gif_pic_center]: /images/20210724/9e51ff97a32d4675bfcbb59afe5bf85a.png
[20200911173749793.gif_pic_center]: /images/20210724/fe6557822c014affa1715858f9c179d8.png