登录时验证的token,和导航栏的显示和隐藏

原创已于 2024-03-25 16:53:00 修改 · 790 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html #css

于 2023-05-09 08:46:05 首次发布

该代码段展示了Vue.js组件中处理用户登录的逻辑，包括发送登录请求，将凭证存储在localStorage，检查token的有效性，以及实现退出登录功能。同时，它还包含了错误处理和状态管理。

第一步发登录的请求，存储到当地

 async login() {
      let data = {
        username: this.loginForm.username,
        password: this.loginForm.password,
      }
      // console.log(data);
      let res = await this.$api.useLogin(data)
      console.log(res);
      if (res.status == 200) {
        this.islogout = false
        localStorage.setItem('username', this.loginForm.username);
        localStorage.setItem('password', this.loginForm.password);
        localStorage.setItem('token', res.data.token)
        console.log(res.data.token);
        this.token = res.data.token
        console.log(this.token);
        this.$message.success(this.loginForm.username + '登陆成功');
        if (this.loginForm.username === 'admin') {
          this.isLogin = true
        this.$emit('formlogin', this.isLogin)
        } else {
          this.isLogin = false
        this.$emit('formlogin', this.isLogin)
        }
        // localStorage.setItem('islogin', false);
        // this.$emit('formlogin', this.isLogin)
        // this.$emit('formlogins', this.isLogin)
      } else {
        if (this.loginForm.username == '' && this.loginForm.password == '') {
          this.$message.error('账号或密码为空')
        } else {
          this.$message.error('账号或密码错误')
        }
      }
    },

退出的时候清除当地的缓存

loginout() {
      localStorage.removeItem('token')
      localStorage.removeItem('username')
      localStorage.removeItem('password')
      localStorage.removeItem('islogin');
      this.loginForm = {
        username: '',
        password: ''
      }
      this.islogout = !this.islogout
      this.isLogin = false
      this.$emit('formlogin', this.isLogin)
      // console.log(this.isLogin);
    },

验证当前是否有token在created里面用一下，this.existtoken()

   // 与后端判断是否存在token
    async existtoken() {
      try {
        const token = localStorage.getItem('token')
        let data = {
          token: this.token
        }
        // console.log(data);
        let res = await this.$api.usertoken(data)
        // console.log(res);
        if (res.code == 200) {
          this.islogout = false
          if(this.loginForm.username === 'admin') {
          this.isLogin = true
          }else{
          this.isLogin = false
          }
          this.$emit('formlogin', this.isLogin)
        } else {
          if (res.code == 403) {
            this.loginout()
          } else {
            this.islogout = true
            this.isLogin = false
            this.$emit('formlogin', this.isLogin)
          }
        }
      } catch (error) {
        console.error(error)
        this.islogout = true
      }


    }
  },
  created() {
    // 与后端判断是否存在token
    this.existtoken()
    // 从当地的拿取数据
    // console.log(this.isLogin);
    let storedUsername = localStorage.getItem('username');
    if (storedUsername) {
      this.loginForm.username = storedUsername;
    }
    // if (islogin === 'false') {
    //   this.isLogin = false;
    // }
  }

完整代码

<template>
  <!-- 登入 -->
  <div>
    <div v-if="islogout">
      <div>
        <span
          style="width:60px; height: 25px; font-size: 12px; margin-left: 50%; line-height: 25px;  display: inline-block; color: #42a1a1;">用户名:</span>
        <input type="text" placeholder="用户名" v-model="loginForm.username"
          style="background-color: transparent; color: #42a1a1; border: 1px solid #b1b1ab;">
      </div>
      <div>
        <span
          style="width:60px; height: 25px; margin-left: 50%;  font-size: 12px; display: inline-block; color: #42a1a1;">密码
          &nbsp;&nbsp;:</span>
        <input type="text" placeholder="密码" v-model="loginForm.password"
          style="background-color: transparent; color: #42a1a1; border: 1px solid #b1b1ab;">
      </div>
      <div style="display: inline-block; position: absolute; top: 10px; right: 8%;">
        <a href="#" style="color: #42a1a1; font-size: 15px;" @click="register">立即注册</a><br>
        <button @click="login"
          style="text-align: center; font-size: 15px; width:70px ;margin-top: 2px; border: 1px solid #b1b1ab; color: #42a1a1; ">登入</button>
      </div>
    </div>
    <div v-if="!islogout">
      <div style="display: inline-block; position: absolute;  color: #42a1a1;right: 300px;top: 30px;">
        <span>用户名:{{ loginForm.username }}</span>
      </div>
      <div style="margin-left: 80%; display: inline-block; margin-top: 20px; color: #42a1a1; font-size: 15px;"
        @click="loginout">退出</div>
    </div>
  </div>
</template>
<script>
export default {

  data() {
    return {
      loginForm: {
        username: '',
        password: '',
      },
      isLogin: false,
      // 登入框的显示与隐藏
      islogout: false,
      token: '',
    }
  },
  methods: {
    // 登录
    async login() {
      let data = {
        username: this.loginForm.username,
        password: this.loginForm.password,
      }
      // console.log(data);
      let res = await this.$api.useLogin(data)
      console.log(res);
      if (res.status == 200) {
        this.islogout = false
        localStorage.setItem('username', this.loginForm.username);
        localStorage.setItem('password', this.loginForm.password);
        localStorage.setItem('token', res.data.token)
        console.log(res.data.token);
        this.token = res.data.token
        console.log(this.token);
        this.$message.success(this.loginForm.username + '登陆成功');
        if (this.loginForm.username === 'admin') {
          this.isLogin = true
        this.$emit('formlogin', this.isLogin)
        } else {
          this.isLogin = false
        this.$emit('formlogin', this.isLogin)
        }
        // localStorage.setItem('islogin', false);
        // this.$emit('formlogin', this.isLogin)
        // this.$emit('formlogins', this.isLogin)
      } else {
        if (this.loginForm.username == '' && this.loginForm.password == '') {
          this.$message.error('账号或密码为空')
        } else {
          this.$message.error('账号或密码错误')
        }
      }
    },
    // 注册
    register() {
      this.$router.push('/login')
    },
    // 退出
    loginout() {
      localStorage.removeItem('token')
      localStorage.removeItem('username')
      localStorage.removeItem('password')
      localStorage.removeItem('islogin');
      this.loginForm = {
        username: '',
        password: ''
      }
      this.islogout = !this.islogout
      this.isLogin = false
      this.$emit('formlogin', this.isLogin)
      // console.log(this.isLogin);
    },
    // 与后端判断是否存在token
    async existtoken() {
      try {
        const token = localStorage.getItem('token')
        let data = {
          token: this.token
        }
        // console.log(data);
        let res = await this.$api.usertoken(data)
        // console.log(res);
        if (res.code == 200) {
          this.islogout = false
          if(this.loginForm.username === 'admin') {
          this.isLogin = true
          }else{
          this.isLogin = false
          }
          this.$emit('formlogin', this.isLogin)
        } else {
          if (res.code == 403) {
            this.loginout()
          } else {
            this.islogout = true
            this.isLogin = false
            this.$emit('formlogin', this.isLogin)
          }
        }
      } catch (error) {
        console.error(error)
        this.islogout = true
      }


    }
  },
  created() {
    // 与后端判断是否存在token
    this.existtoken()
    // 从当地的拿取数据
    // console.log(this.isLogin);
    let storedUsername = localStorage.getItem('username');
    if (storedUsername) {
      this.loginForm.username = storedUsername;
    }
    // if (islogin === 'false') {
    //   this.isLogin = false;
    // }
  }
}
</script>
<style lang="less" scoped>
input::-webkit-input-placeholder {
  padding-left: 10px;
  font-size: 10px;
  color: #42a1a1;
  border: 1px solid white;
}
</style>