简单实现vue中的登录拦截

本文主要讲述如何在vue中使用路由判断简单实现登陆的的拦截。

如何实现

首先在定义路由的时候就需要多添加一个自定义字段requireAuth，用于判断该路由的访问是否需要登录。如果用户已经登录，则顺利进入路由， 否则就进入登录页面。

path: '/Info',
meta: {
  requireAuth: true
},
component: resolve => require(['../pages/InfoPage.vue'], resolve)

定义完路由，main.js中利用vue-router提供的钩子函数beforeEach()对路由进行判断。

localstorage是在登陆后用来存储信息的，具体可以看之后登录的代码

//登录拦截
router.beforeEach((to,from,next)=>{
  if (to.meta.requireAuth) {//requireAuth若为true则该路由需要判断是否登录
    if (localStorage.userName) {//判断当前的userName数据是否存在
      next();
    }
    else {
      next({//返回登录页面
        path: '/',
        query: {redirect: to.fullPath}
      })
    }
  }
  else {
    next();
  }
})

登陆页面的简单实现，如果用户登陆，就把用户信息存到localstorage中，在前置的路由守卫中通过判断localstorage中是否有用户信息，实现登陆拦截功能

<template>
  <div class="login-wrap">
    <div class="ms-title">music 后台管理登录</div>
    <div class="ms-login">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
        <el-form-item prop="username">
          <el-input v-model="ruleForm.username" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="ruleForm.password" placeholder="密码"></el-input>
        </el-form-item>
        <div class="login-btn">
          <el-button type="primary" @click="submitForm">登录</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import {mixin} from "../mixins/index";
import {getLoginStatus} from "../api/index";
export default {
  mixins:[mixin],
  data(){
    return {
      ruleForm:{
        username: "",
        password: ""
      },
      rules:{
        name:[
          {required:true,message:"请输入用户名",trigger:"blur"}
        ],
        password:[
          {required:true,message:"请输入密码",trigger:"blur"}
        ]
      }
    }
  },
  methods:{
    submitForm(){
      let params = new URLSearchParams();
      params.append("name",this.ruleForm.username);
      params.append("password",this.ruleForm.password);
      getLoginStatus(params)
        .then((res) =>{
          if(res.state == 200){
            localStorage.setItem('userName',this.ruleForm.username);

            this.$router.push("/Info");
            this.notify("登录成功","success");
            //存储用户登录信息
          }else{
            this.notify("登录失败","error");
          }
        });
    }
  }
}
</script>

到这一步，已经可以完成拦截跳转到登录页面的功能了

退出登录时的操作：移除localStorage中的值，跳转到登录的页面即可