JavaScript系列—用户登录退出cookies—vue版

Love The Way You Lie 2021-12-15 21:29 423阅读 0赞

这篇文章我们结合vue和vue-router来说一下如何实现用户的登录，退出，和cookies

先回忆一下之前《vue-router—14案例：模拟登录跳转》这篇文章

### 1. vue-router—14案例：模拟登录跳转 ###

首先封装一下插件(关于为什么这么封装，为什么会有install，可以参考这篇博文[https://www.cnblogs.com/mengfangui/p/9046525.html][https_www.cnblogs.com_mengfangui_p_9046525.html])

utils.js

/**
     * Vue的插件，用来获取和设置localStorage存储
     **/
    let local = {
      save (key, value) {
        localStorage.setItem(key, JSON.stringify(value))
      },
      fetch (key) {
        return JSON.parse(localStorage.getItem(key)) || {}
      }
    }
    
    export default {
      install: function (vm) {
        vm.prototype.$local = local
      }
    }

然后在main.js中use

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

然后在router.js中全局路由钩子中判断

router.beforeEach((to, from, next) => {
      
      let b1 = to.matched.some(item => item.meta.login)
      if(b1) { // matched这个字段包含了所有的相关的节点,假如有任何一个节点有{login:true}
        // 获取到缓存里面的用户的字段
        let info = router.app.$local.fetch("miaov")
        if(info.login){ //如果是已经登录状态
          next();
        }else{  //如果是登出状态
          // 此处跳转到登录界面，并且新增加一个字段，记录用户一开始想去的路由
          router.push({
            path: '/login',
            query: {
              redirect: to.path.slice(1)
            }
          })
        }
    
      }else{ // matched这个字段包含了所有的相关的节点,没有任何一个节点包含login，那么就不用管了
        next()
      }
      
    })

现在就到了登录界面login.vue

<template>
      <div class="login">
        <div class="login-box">
          <h2>登录</h2>
          <form @submit.prevent='sendLogin' autocomplete="off">
            <div><input placeholder="请输入用户名" type="text" name="user" ref="userInput" /></div>
            <div><input placeholder="请输入密码" type="password" name="password" /></div>
            <div class="login-btn"><input type="submit" value="一键登入" /></div>
          </form>
          <div class="back-index">
            <router-link  to="/">首页>>></router-link>
          </div>
        </div>
      </div>
    </template>
    
    <script>
      export default {
        name: 'login',
        data () {
          return {}
        },
        methods: {
          sendLogin () {
    
            // 点击登录
            let userName = this.$refs.userInput.value;
            // 向缓存中保存用户信息
            this.$local.save("miaov", {
                login: true,
                userName: userName
            })
            // 获取在全局路由钩子中记录的用户一开始想去的路由界面
            let redirect = this.$route.query.redirect
            // 如果没有记录，那就默认进project这个路由界面
            if(!redirect){
              redirect = 'project'
            }
            // 跳转路由
            this.$router.push({
              path: '/'+redirect
            })
          }
        }
      }
    </script>
    <style>
    
    </style>

接下来就是home.vue这块

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1][]

如果从缓存中获取到信息，则就显示用户的姓名和图标，如果没有，那么显示登录两个字

<template>
      <div class="main">
        <div class="home-header">
          <img src="../assets/miaov.png" alt="">
          <div class="portrait" :class={portraitLogin:isLogin}>
            <router-link  v-if="!isLogin" to="/login" tag="span">登录</router-link>
            <img  v-if="isLogin" src="../assets/portrait.png" alt="">
          </div>
    
        </div>
        <div class="phrase">
          一起学习Vue-router
        </div>
        <div class="btns">
          <router-link to="/project" tag="div" class=" trans">我的项目</router-link>
          <router-link to="/doc" tag="div" class=" trans">我的文档</router-link>
        </div>
      </div>
    </template>
    
    <script>
      export default {
        name: 'home',
        data () {
          return {
            isLogin: false
          }
        },
        created(){
            // 拿到登录信息
          let info = this.$local.fetch('miaov')
    
          this.isLogin = info.login;
        }
      }
    </script>
    <style>
    
    </style>

下来是这块的显示以及退出

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2][]

header,vue

<template>
      <div class="clearFix el-menu--dark">
        <ul class="el-menu menu-horizontal el-menu--dark el-menu--horizontal header-nav" >
          <router-link to="/" class="el-menu-item logo" exact tag="li">
          <img src="../assets/miaov.png">
        </router-link>
          <router-link to="/project" class="el-menu-item" tag="li" >
            <i class="fa fa-home"></i>
            我的项目
          </router-link>
          <router-link to='/workbench' class="el-menu-item"  tag="li">
            <i class="fa fa-code"></i>
            工作台
          </router-link>
          <router-link to="/doc" class="el-menu-item" tag="li">
            <i class="fa fa-book"></i>
            文档
          </router-link>
        </ul>
        <div class="user-info-box" v-show="isLogin">
          <div class="el-submenu__title">
            <img src="../assets/portrait.png">
            <span>{
       {userName}}</span>
          </div>
          <div class="header-menu">
            <ul class="menu-nav">
              <li class="el-menu-item" @click="loginOut">登出</li>
            </ul>
          </div>
        </div>
      </div>
    </template>
    
    <script>
      export default {
        name: 'Header',
        data () {
          return {
            userName: '',
            isLogin: false
          }
        },
        created(){
          let info = this.$local.fetch("miaov")
          this.isLogin = info.login;
          this.userName = info.userName
        },
        methods: {
          loginOut(){
            this.$local.save("miaov", null)
            this.$router.push("/login")
          }
        }
      }
    </script>
    <style>
    
    </style>

###  2.实际项目 ###

下来分析一下我们的协同项目中登录登出是怎么写

<template>
        <div class="login">
            <div>
                <div class="hd-logo"></div>
                <div class="header">{
       {this.tenantName}}3D云设计平台</div>
                <el-form :model="login">
                    <div style="width: 324px;margin: auto;">
                        <el-row>
                            <el-col>
                                <el-input v-model="login.email" placeholder="请输入邮箱账号"></el-input>
                            </el-col>
                        </el-row>
    
                        <el-row>
                            <el-col>
                                <el-input type="password" v-model="login.password" placeholder="请输入密码"></el-input>
                            </el-col>
                        </el-row>
    
                        <el-row v-if="isValidateCodePicFlag" >
                            <el-col style="display: flex">
                                <el-input v-model="login.validateCode" placeholder="请输入验证码" style="width: 200px;"></el-input>
                                <img :src="validateImg" style="display:  inline-block; border:  solid 1px black; width:  100px; height: 34px; margin-left: 20px;
    ">
                            </el-col>
                        </el-row>
    
                        <div class="forget-choose">
                            <el-checkbox class="remember-me" v-model="login.rememberMe">记住我</el-checkbox>
                            
                        </div>
    
                        <el-row>
                            <el-col>
                                <el-button type="primary" @click="onSubmit">登录</el-button>
                            </el-col>
                        </el-row>
                    </div>
    
                </el-form>
            </div>
        </div>
    </template>

created() {
                if (Cookies.get('rememberMe') === true || Cookies.get('rememberMe') === 'true') {
                    this.login.rememberMe = true;
                }
    
                if(this.login.rememberMe){
                    this.login.password = Cookies.get('password');
                    this.login.email = Cookies.get('userEmail');
                }else{
                    this.login.email = '';
                    this.login.password = '';
                }
            },
            mounted(){
                const self = this;
                document.onkeypress = function (event) {
                    if(self.passwordVisible == false){
                        if(event.keyCode == 13 && self.$route.path === '/login'){
                            self.onSubmit();
                        }
                    }
    
                }
            },
            watch: {
                'login.rememberMe'(val){
                    this.$store.commit(types.REMEBER_ME_ACCOUNT, {data: val});
                }
            },
            methods: {
                onSubmit() {
                    if(!this.login.email || !this.login.password){
                        this.$message.info("请输入账号或密码");
                        return;
                    }
    
                    if(this.isValidateCodePicFlag && !this.login.validateCode){
                        this.$message.info("请输入验证码");
                        return;
                    }
    
                    if(this.isValidateCodePicFlag && this.login.validateCode.length !== 6){
                        this.$message.info("验证码输入不正确");
                        return;
                    }
    
                    const loginData = `username=${this.login.email}&password=${this.login.password}&client_id=planner_jim&client_secret=7890ab&grant_type=password&scopes=bio notes`;
                    let params = {
                        UserName: this.login.email,
                        Password: this.login.password,
                        VerificationCode: this.login.validateCode,
                        VerificationCodeId: this.login.validateImgId,
                    }
                    Request.validatelogin(params, (data) => {
                        if(data.er === -1) {
                            Cookies.set('access_token', data.items.access_token);
                            Cookies.set('refresh_token', data.items.refresh_token);
                            Cookies.remove('loginemail');
                            Cookies.remove('userEmail');
                            Cookies.remove('password');
                            Cookies.remove('rememberMe');
                            Cookies.set('loginemail',this.login.email, {expires:7,path:'/'});
                            Cookies.set('userEmail',this.login.email, {expires:7,path:'/'});
                            Cookies.set('password',this.login.password, {expires:7,path:'/'});
                            if(this.login.rememberMe){
                                Cookies.set('rememberMe',true, {expires:7,path:'/'});
                            } else {
                                Cookies.set('rememberMe',false, {expires:7,path:'/'});
                            }
    
                            this.$store.commit(types.USER_TOKEN, {data: data});
                            this.$store.commit(types.GET_PROJECT_PROPOSAL_BY_ORG_ID, {data: []});
                            this.$router.push({path: '/chooseProject'});
                        }else if(data.er === -25) {
                            this.$message.info('账号密码错误！');
                            if(this.isValidateCodePicFlag) {
                                this.getImgValidateCode();
                            }
                        }else if(data.er === -26) {
                            Cookies.remove('loginemail');
                            Cookies.set('loginemail',this.login.email, {expires:7,path:'/'});
                            this.$router.push({path: '/chooseProject',query: {reset: true}})
                        }else if(data.er === 429) {
                            this.$message.info('账号密码错误！');
                            this.isValidateCodePicFlag = true;
                            this.getImgValidateCode();
                        }else if(data.er === -21) {
                            this.isValidateCodePicFlag = true;
                            this.$message.info('验证码错误！');
                            this.getImgValidateCode()
                        }
    
                    }, (err) => {
    
                    });
                },

[https_www.cnblogs.com_mengfangui_p_9046525.html]: https://www.cnblogs.com/mengfangui/p/9046525.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20211215/45299d974c744c368aa1b659a70bf968.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1]: /images/20211215/b63070a9faf24f5c909d803f8f20d0a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2]: /images/20211215/b666c351a25948b8968dffffaea56ec0.png