简易版------登陆权限的实现

运用全局守卫的方式 在main.js里面

进行页面的登录鉴权使用 beforeEach的路由钩子 它有三个参数 分别是 to from next
to 是 要到哪里 from 是从哪里来 next 是 让它进入下一个
获取登录的权限信息 将它转化为字符串形式 然后进行判断
如果没有登录就跳转到登录页 登陆成功则进入首页
并设置登录过期的时间

main.js

// 用全局路由钩子 进行页面的登录鉴权
router.beforeEach((to, form, next) => {
    
    
  // 对权限的获取
  const role = localStorage.getItem("admin")
  // 字符串转对象
  const val = JSON.parse(role) //val是登录信息
  console.log(val);
  // 设置登陆过期
  if (val !== null) {
    
    
    const timeEnd = Date.now() - val.time;
    if (timeEnd > val.expire) {
    
    
      localStorage.removeItem("admin")
      next("/login")
      return null
    }
  }
  // 没有登陆跳转登陆页面
  if (!val && to.path !== "/login") {
    
    
    next('/login')
  }

  next()
})

login.vue

demo

<div class="login">
    <div class="lk">
      <p>欢迎登录-MMALL管理系统</p>
      <input
        type="email"
        class="form-control"
        id="exampleInputEmail1"
        placeholder="User Name"
        v-model="username"
      />
      <input
        type="password"
        class="form-control"
        id="exampleInputEmail2"
        placeholder="Password"
        v-model="password"
      />
      <button type="button" class="btn btn-primary btn-lg btn-block" @click="login()">
        登录
      </button>
    </div>
  </div>

script

首先需要引入 登录的接口

import {
    
     login } from "../request/http.js";
export default {
    
    
  name: "DsHelloWorld",

  data() {
    
    
    return {
    
    
      username: "admin",
      password: "admin",
      num: "",
    };
  },

  mounted() {
    
    },

  methods: {
    
    
    login() {
    
    
      if (this.username == "") {
    
    
        return alert("用户名不可以为空");
      }
      if (this.password == "") {
    
    
        return alert("密码不可以为空");
      }
      var form = {
    
     username: this.username, password: this.password };
      // console.log(qs.stringify(form));

      login(form)
        .then((res) => {
    
    
          console.log(res);
          this.num = res.data;
          this.loading();
        })
        .catch((err) => {
    
    
          return false;
        });
    },
    loading() {
    
    
      if (!this.num.status) {
    
    
        // 如果登录返回0，提示成功，
        this.$message({
    
    
          message: "恭喜你，登录成功",
          type: "success",
        });
        // 设置token过期时间, 本地存储过期时间
        const obj = {
    
    
          time: Date.now(),
          expire: 1000 * 60 * 1, //分钟
          data: this.username,
        };
        localStorage.setItem("admin", JSON.stringify(obj));
        // this.$router.push('/index')
        this.$router.push({
    
    
          path: "/index",
          params: {
    
     user: this.username },
        });
      } else {
    
    
        this.$message({
    
    
          message: this.num.msg,
          type: "warning",
        });
      }
    },
  },
};