登入和登出

有接口

Login.vue登入

template

<el-button type="primary" @click="login">登录</el-button>

script

// 1. 将登录成功之后的 token，保存到客户端的 sessionStorage 中
// 1.1 项目中除了登录之外的其他API接口，必须在登录之后才能访问
// 1.2 token 只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage 中

methods: {
    login() {
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) return
          const { data: res } = await this.$http.post('login', this.loginForm)
        if (res.meta.status !== 200) return this.$message.error('登录失败！')
       	  this.$message.success('登录成功')
          window.sessionStorage.setItem('token', res.data.token)
          this.$router.push('/home')
      })
    }
  }

Home.vue退出登录

template

<button type="button"  @click="logout">退出登录</button>

script

export default {
    methods:{
        logout(){
            window.sessionStorage.clear();
            this.$router.push('/login');
        }
    }
}

无接口

实现退出功能。在Home组件中添加一个退出功能按钮,给退出按钮添加点击事件，添加事件处理代码如下：

methods: {
    logout() {
      localStorage.removeItem('token')
      this.$router.push('/login')
    }
}

export default {
  name: 'MyLogin',
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    reset() {
      this.username = ''
      this.password = ''
    },
    login() {
      if (this.username === 'admin' && this.password === 'admin') {
        // 登录成功
        // 1. 存储 token
        localStorage.setItem('token', 'Bearer xxxx')
        // 2. 跳转到后台主页
        this.$router.push('/home')
      } else {
        // 登录失败
        alert("请输入正确的账号密码！")
        localStorage.removeItem('token')
      }
    }
  }
}