学习

Activity 6.1: Creating a Secure Members Area in Your Library App · Jimmy Huang's Blog

Activity 6.1: Creating a Secure Members Area in Your Library App

本页目录· 12 条

Learning Objective
Background
Requirements
实现流程
1. Login Page
2. Authentication
3. Authenticated users (Successful login)
4. Redirecting Unauthenticated Users
5. Conditional Rendering
6. Logout Functionality
Summary
具体功能实现

Learning Objective

通过使用Vue Router和条件渲染，实现登录系统和安全的会员专区。
利用 Vue Router 官方文档，成功实现中级路由功能。

Background

并不是网站的所有页面都应该对公众开放。在这个活动中，你将创建一个 登录页面，并将图书馆应用中的某些部分限制为 仅登录用户可访问。

Requirements

创建一个带有用户名和密码字段的 登录页面。
创建一个 拒绝访问页面（Access Denied），用于显示给未认证的用户。
实现一个简单的身份验证系统（暂时使用硬编码的账号和密码）。
限制某些路由（例如 About 页面）只能由认证用户访问。
当未认证用户尝试访问受限路由时，将其重定向到登录页面。
已认证用户显示 注销 (Logout) 选项。

实现流程

1. Login Page

创建一个新的视图文件 LoginView.vue。
使用 v-model 实现输入字段的双向绑定
实现一个方法来处理表单提交

更新路由配置 - 在 src/router/index.js 中添加登录页面路由
更新导航组件 - 在 BHeader.vue 中添加登录链接
<BHeader.vue>

2. Authentication

验证用户输入的用户名/密码，并在应用中存储认证状态（例如 isAuthenticated）。
建议使用 Vue 的 ref() 来管理这个状态。
本练习中，使用硬编码的用户名和密码进行验证

添加硬编码的凭据
实现验证逻辑
添加成功登录后的处理
使用 Vue Router 进行页面跳转

3. Authenticated users (Successful login)

如果用户输入了正确的凭证，则允许其访问 About 页面。

4. Redirecting Unauthenticated Users

如果用户未登录（凭证不正确），则不允许打开 About 页面。
提示：可以通过导航守卫（Navigation Guards）来实现这一功能。

为 About 页面添加 meta 属性，标记为需要身份验证
添加全局前置守卫来检查用户身份验证状态
未认证用户尝试访问 About 页面时重定向到登录页面

Console中使用localStorage.clear() 清除登录状态

访问http://localhost:5173/login 将跳转login

5. Conditional Rendering

使用 v-if 和 v-else 指令，根据用户认证状态显示不同的内容。
可以考虑创建一个导航组件，根据用户是否登录来改变菜单内容。

6. Logout Functionality

使用 Vue Router 在注销后跳转回登录页面。

Summary

1. src/views/LoginView.vue - 新建文件

实现内容：

✅ 创建了完整的登录页面
✅ 使用 v-model 实现用户名和密码字段的双向绑定
✅ 硬编码身份验证系统（用户名：admin，密码：password123）
✅ 表单验证和错误消息显示
✅ 登录成功后存储状态到 localStorage
✅ 自动跳转到首页功能
✅ 与现有页面风格保持一致的 Bootstrap 样式

2. src/router/index.js - 路由配置更新

实现内容：

✅ 添加了登录页面路由 (/login)
✅ 为 About 页面添加了 meta: { requiresAuth: true } 属性
✅ 实现了全局前置守卫 (router.beforeEach)
✅ 路由保护机制：未认证用户访问 /about 时自动重定向到 /login
✅ 身份验证状态检查逻辑

3. src/components/BHeader.vue - 导航组件更新

实现内容：

✅ 添加了登录页面链接到导航栏
✅ 实现了条件渲染：根据登录状态显示不同内容
未登录：显示 "Login" 链接
已登录：显示 "Welcome, [用户名] ▼" 下拉菜单
✅ 添加了注销功能
✅ 实现了响应式状态管理
✅ 自定义事件系统来同步组件间的状态变化
✅ 下拉菜单的显示/隐藏控制

4. src/main.js - 主入口文件更新

实现内容：

✅ 导入了 Bootstrap JavaScript 支持 (bootstrap.bundle.min.js)
✅ 确保 Bootstrap 下拉菜单功能正常工作

具体功能实现

登录页面：完整的表单和验证系统
身份验证：硬编码的用户名/密码验证
路由保护：About 页面仅限登录用户访问
重定向机制：未认证用户自动跳转到登录页面
条件渲染：根据登录状态动态显示导航选项
注销功能：完整的登录/注销流程

javascript

<template>
  <div class="container mt-5">
    <div class="login">
      <h1 class="text-center">Login to Library</h1>
      <div class="row justify-content-center">
        <div class="col-md-6 col-lg-4">
          <form @submit.prevent="handleLogin" class="mt-4">
            <div class="mb-3">
              <label for="username" class="form-label">Username</label>
              <input
                type="text"
                class="form-control"
                id="username"
                v-model="username"
                placeholder="Enter your username"
                required
              />
            </div>
            <div class="mb-3">
              <label for="password" class="form-label">Password</label>
              <input
                type="password"
                class="form-control"
                id="password"
                v-model="password"
                placeholder="Enter your password"
                required
              />
            </div>
            <div class="d-grid">
              <button type="submit" class="btn btn-primary">
                Login
              </button>
            </div>
            <div v-if="errorMessage" class="alert alert-danger mt-3" role="alert">
              {{ errorMessage }}
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const username = ref('')
const password = ref('')
const errorMessage = ref('')

const handleLogin = () => {
  // 这里暂时只是清空错误消息，后续我们会添加实际的登录逻辑
  errorMessage.value = ''
  
  // 基本的表单验证
  if (!username.value || !password.value) {
    errorMessage.value = 'Please enter both username and password'
    return
  }
  
  // TODO: 这里将添加实际的登录验证逻辑
  console.log('Login attempt:', { username: username.value, password: password.value })
}
</script>

<style scoped>
.container {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  max-width: 80vw;
  margin: 0 auto;
  padding: 20px;
  border-radius: 10px;
}

.login {
  text-align: center;
}

.form-control:focus {
  border: 1px solid #275fda;
  box-shadow: 0 0 0 0.25rem rgba(39, 95, 218, 0.25);
}

.btn-primary {
  background-color: #275fda;
  border-color: #275fda;
}

.btn-primary:hover {
  background-color: #1e4bb8;
  border-color: #1e4bb8;
}

.alert {
  border-radius: 10px;
}
</style>

javascript

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'
import LoginView from '../views/LoginView.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'About',
    component: AboutView
  },
  {
    path: '/login',
    name: 'Login',
    component: LoginView
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

javascript

<template>
  <!-- Using Bootstrap's Header template (starter code) -->
  <!-- https://getbootstrap.com/docs/5.0/examples/headers/ -->
  <div class="container">
    <header class="d-flex justify-content-center py-3">
      <ul class="nav nav-pills">
        <li class="nav-item">
          <router-link to="/" class="nav-link" active-class="active" aria-current="page"
            >Home (Week 5)</router-link
          >
        </li>
        <li class="nav-item">
          <router-link to="/about" class="nav-link" active-class="active">About</router-link>
        </li>
        <li class="nav-item">
          <router-link to="/login" class="nav-link" active-class="active">Login</router-link>
        </li>
      </ul>
    </header>
  </div>
</template>

javascript

<template>
  <div class="container mt-5">
    <div class="login">
      <h1 class="text-center">Login to Library</h1>
      <div class="row justify-content-center">
        <div class="col-md-6 col-lg-4">
          <form @submit.prevent="handleLogin" class="mt-4">
            <div class="mb-3">
              <label for="username" class="form-label">Username</label>
              <input
                type="text"
                class="form-control"
                id="username"
                v-model="username"
                placeholder="Enter your username"
                required
              />
            </div>
            <div class="mb-3">
              <label for="password" class="form-label">Password</label>
              <input
                type="password"
                class="form-control"
                id="password"
                v-model="password"
                placeholder="Enter your password"
                required
              />
            </div>
            <div class="d-grid">
              <button type="submit" class="btn btn-primary">
                Login
              </button>
            </div>
            <div v-if="errorMessage" 
                 :class="['alert mt-3', 
                         errorMessage.includes('successful') ? 'alert-success' : 'alert-danger']" 
                 role="alert">
              {{ errorMessage }}
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const username = ref('')
const password = ref('')
const errorMessage = ref('')

// 硬编码的用户凭据
const VALID_CREDENTIALS = {
  username: 'admin',
  password: 'password123'
}

// 登录处理函数
const handleLogin = () => {
  // 清空错误消息
  errorMessage.value = ''
  
  // 基本的表单验证
  if (!username.value || !password.value) {
    errorMessage.value = 'Please enter both username and password'
    return
  }
  
  // 验证用户凭据
  if (username.value === VALID_CREDENTIALS.username && 
      password.value === VALID_CREDENTIALS.password) {
    
    // 登录成功
    console.log('Login successful!')
    
    // 存储登录状态到 localStorage（临时方案）
    localStorage.setItem('isAuthenticated', 'true')
    localStorage.setItem('currentUser', username.value)
    
    // 显示成功消息
    errorMessage.value = 'Login successful! Redirecting...'
    
    // 延迟跳转到首页
    setTimeout(() => {
      router.push('/')
    }, 1500)
    
  } else {
    // 登录失败
    errorMessage.value = 'Invalid username or password. Please try again.'
    console.log('Login failed:', { username: username.value, password: password.value })
  }
}
</script>

<style scoped>
.container {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  max-width: 80vw;
  margin: 0 auto;
  padding: 20px;
  border-radius: 10px;
}

.login {
  text-align: center;
}

.form-control:focus {
  border: 1px solid #275fda;
  box-shadow: 0 0 0 0.25rem rgba(39, 95, 218, 0.25);
}

.btn-primary {
  background-color: #275fda;
  border-color: #275fda;
}

.btn-primary:hover {
  background-color: #1e4bb8;
  border-color: #1e4bb8;
}

.alert {
  border-radius: 10px;
}
</style>

javascript

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'
import LoginView from '../views/LoginView.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'About',
    component: AboutView,
    meta: { requiresAuth: true }
  },
  {
    path: '/login',
    name: 'Login',
    component: LoginView
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

// 全局前置守卫 - 检查身份验证
router.beforeEach((to, from, next) => {
  // 检查路由是否需要身份验证
  if (to.meta.requiresAuth) {
    // 从 localStorage 检查用户是否已登录
    const isAuthenticated = localStorage.getItem('isAuthenticated') === 'true'
    
    if (isAuthenticated) {
      // 用户已登录，允许访问
      next()
    } else {
      // 用户未登录，重定向到登录页面
      next('/login')
    }
  } else {
    // 不需要身份验证的路由，直接允许访问
    next()
  }
})

export default router

javascript

// 全局前置守卫 - 检查身份验证
router.beforeEach((to, from, next) => {
  // 检查路由是否需要身份验证
  if (to.meta.requiresAuth) {
    // 从 localStorage 检查用户是否已登录
    const isAuthenticated = localStorage.getItem('isAuthenticated') === 'true'
    
    if (isAuthenticated) {
      // 用户已登录，允许访问
      next()
    } else {
      // 用户未登录，重定向到登录页面
      next('/login')
    }
  } else {
    // 不需要身份验证的路由，直接允许访问
    next()
  }
})

javascript

<template>
  <!-- Using Bootstrap's Header template (starter code) -->
  <!-- https://getbootstrap.com/docs/5.0/examples/headers/ -->
  <div class="container">
    <header class="d-flex justify-content-center py-3">
      <ul class="nav nav-pills">
        <li class="nav-item">
          <router-link to="/" class="nav-link" active-class="active" aria-current="page"
            >Home (Week 5)</router-link
          >
        </li>
        <li class="nav-item">
          <router-link to="/about" class="nav-link" active-class="active">About</router-link>
        </li>
        
        <!-- 条件渲染：根据登录状态显示不同内容 -->
        <li v-if="!isAuthenticated" class="nav-item">
          <router-link to="/login" class="nav-link" active-class="active">Login</router-link>
        </li>
        
        <li v-if="isAuthenticated" class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" @click="toggleDropdown" aria-expanded="false">
            Welcome, {{ currentUser }}
          </a>
          <ul v-show="showDropdown" class="dropdown-menu show">
            <li><a class="dropdown-item" href="#" @click="handleLogout">Logout</a></li>
          </ul>
        </li>
      </ul>
    </header>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'

// 获取路由实例
const router = useRouter()

// 响应式状态
const isAuthenticated = ref(false)
const currentUser = ref('')
const showDropdown = ref(false)

// 检查登录状态
const checkAuthStatus = () => {
  const authStatus = localStorage.getItem('isAuthenticated')
  const user = localStorage.getItem('currentUser')
  
  isAuthenticated.value = authStatus === 'true'
  currentUser.value = user || ''
}

// 切换下拉菜单
const toggleDropdown = () => {
  showDropdown.value = !showDropdown.value
}

// 注销处理
const handleLogout = () => {
  // 清除登录状态
  localStorage.removeItem('isAuthenticated')
  localStorage.removeItem('currentUser')
  
  // 更新组件状态
  isAuthenticated.value = false
  currentUser.value = ''
  showDropdown.value = false
  
  // 触发自定义事件来通知其他组件状态已更新
  window.dispatchEvent(new CustomEvent('auth-status-changed'))
  
  // 跳转到首页
  router.push('/')
  
  console.log('User logged out successfully')
}

// 组件挂载时检查登录状态
onMounted(() => {
  checkAuthStatus()
  
  // 监听 localStorage 变化（当其他组件更新登录状态时）
  window.addEventListener('storage', checkAuthStatus)
  
  // 监听自定义事件来同步状态
  window.addEventListener('auth-status-changed', checkAuthStatus)
})

// 组件卸载时清理事件监听器
onUnmounted(() => {
  window.removeEventListener('storage', checkAuthStatus)
  window.removeEventListener('auth-status-changed', checkAuthStatus)
})
</script>

<style scoped>
.b-example-divider {
  height: 3rem;
  background-color: rgba(0, 0, 0, 0.1);
  border: solid rgba(0, 0, 0, 0.15);
  border-width: 1px 0;
  box-shadow:
    inset 0 0.5em 1.5em rgba(0, 0, 0, 0.1),
    inset 0 0.125em 0.5em rgba(0, 0, 0, 0.15);
}

.form-control-dark {
  color: #fff;
  background-color: var(--bs-dark);
  border-color: var(--bs-gray);
}
.form-control-dark:focus {
  color: #fff;
  background-color: var(--bs-dark);
  border-color: #fff;
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
}

.bi {
  vertical-align: -0.125em;
  fill: currentColor;
}

.text-small {
  font-size: 85%;
}

.dropdown-toggle {
  outline: 0;
}
</style>

javascript

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.bundle.min.js'

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

import PrimeVue from 'primevue/config'
import Aura from '@primevue/themes/aura'

const app = createApp(App)
app.use(PrimeVue, { theme: { preset: Aura } })
app.use(router)

app.mount('#app')