简单实现vue中的登录拦截

落日映苍穹つ 2023-09-29 11:23 6阅读 0赞

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

### 如何实现 ###

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

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

![image-20220421144113040][]

定义完路由，main.js中利用`vue-router`提供的[钩子函数][Link 1]`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();
      }
    })

![image-20220421144300526][]

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

![image-20220421144603254][]

<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中的值，跳转到登录的页面即可

![image-20220421144847747][]

[image-20220421144113040]: https://img-blog.csdnimg.cn/img_convert/2be4161f156f6252efbf6df1753b3b03.png
[Link 1]: https://so.csdn.net/so/search?q=%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0&spm=1001.2101.3001.7020
[image-20220421144300526]: https://img-blog.csdnimg.cn/img_convert/f9891bb53dd1e512a87f8aa375453278.png
[image-20220421144603254]: https://img-blog.csdnimg.cn/img_convert/86c3a1394c0314521d76aff010541685.png
[image-20220421144847747]: https://img-blog.csdnimg.cn/img_convert/6a660afb06ab4fff775bf77bf211c404.png