Vue登录路由守卫

假设，admin 密码123456 就可以跳转到主页

路由的安装与配置：详情跳转

源代码：

1. 路由器配置页面

import Vue from 'vue'
import VueRouter from 'vue-router'
import Mylogin from '../components/MyLogin.vue'
Vue.use(VueRouter)

const router = new VueRouter({
  // 路由规则的数组 routes
  routes: [
    { path: '/', component: MyHome },
    // 只有/login不需要访问权限
    { path: '/login', component: Mylogin }
  ]
})

// 定义全局前置导航守卫
router.beforeEach((to, from, next) => {
  // 处理访问权限
  if (to.path === '/login') {
    next()
  }
  else {
    const token = localStorage.getItem('token')
    if (token) {
      next()
    }
    else {
      next('/login')
    }
  }
})

2. 登录页面

<template>
  <div class="login-container">
    <div class="login-box">
      <!-- 表单区域 -->
      <div class="form-login p-4">
        <!-- 登录名称 -->
        <div class="form-group form-inline">
          <label for="username">登录名称</label>
          <input
            v-model.trim="username"
            type="text"
            class="form-control ml-2"
            id="username"
            placeholder="请输入登录名称"
            autocomplete="off"
          />
        </div>
        <!-- 登录密码 -->
        <div class="form-group form-inline">
          <label for="password">登录密码</label>
          <input
            v-model.trim="password"
            type="password"
            class="form-control ml-2"
            id="password"
            placeholder="请输入登录密码"
          />
        </div>
        <!-- 登录和重置按钮 -->
        <div class="form-group form-inline d-flex justify-content-end">
          <button type="button" class="btn btn-secondary mr-2">重置</button>
          <button type="button" class="btn btn-primary" @click="login">登录</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MyLogin',
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      if (this.username === 'admin' && this.password === '123456') {
        // 登录成功
        // 存储一个假token
        // token字符串标准形式 bearer空格xxx
        localStorage.setItem('token', 'bearer xxx')
        // 跳转到后台主页（）
        this.$router.push('/')
      } else {
        // 登录失败
        // 清空token
        localStorage.removeItem('token')
        // 清空data中的数据
        this.username = ''
        this.password = ''
      }
    }
  }
}
</script>
<style lang="less" scoped>
.login-container {
  background-color: skyblue;
  height: 100%;
  .login-box {
    width: 400px;
    height: 200px;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
    .form-login {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      box-sizing: border-box;
    }
  }
}

.form-control {
  flex: 1;
}

}
</style>