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

我们先理清一下思路

先在路由中设置一个全局路由
判断如果没有获取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登录页
我们看下演示效果

这里免费提供一个测试的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>

然后在看下演示效果