路由规则
const router = new VueRouter({ routes: [ { path: '/', redirect: '/login' }, // 登录的路由规则 { path: '/login', component: Login }, // 后台主页的路由规则 { path: '/home', component: Home, redirect: '/home/users', children: [ { path: 'users', component: Users }, { path: 'rights', component: Rights }, { path: 'goods', component: Goods }, { path: 'orders', component: Orders }, { path: 'settings', component: Settings }, // 用户详情页的路由规则 { path: 'userinfo/:id', component: UserDetail, props: true } ] } ] }) // 全局前置守卫 router.beforeEach(function(to, from, next) { if (pathArr.indexOf(to.path) !== -1) { const token = localStorage.getItem('token') if (token) { next() } else { next('/login') } } else { next() } })
pathArr.js
export default ['/home', '/home/users', '/home/rights']
Login.vue
<template> <div class="login-container"> <div class="login-box"> <!-- 头像区域 --> <div class="text-center avatar-box"> <img src="../assets/logo.png" class="img-thumbnail avatar" alt="" /> </div> <!-- 表单区域 --> <div class="form-login p-4"> <!-- 登录名称 --> <div class="form-group form-inline"> <label for="username">登录名称</label> <input type="text" class="form-control ml-2" id="username" placeholder="请输入登录名称" autocomplete="off" v-model.trim="username" /> </div> <!-- 登录密码 --> <div class="form-group form-inline"> <label for="password">登录密码</label> <input type="password" class="form-control ml-2" id="password" placeholder="请输入登录密码" v-model.trim="password" /> </div> <!-- 登录和重置按钮 --> <div class="form-group form-inline d-flex justify-content-end"> <button type="button" class="btn btn-secondary mr-2" @click="reset">重置</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: { reset() { this.username = '' this.password = '' }, login() { if (this.username === 'admin' && this.password === '666666') { // 登录成功 // 1. 存储 token localStorage.setItem('token', 'Bearer xxxx') // 2. 跳转到后台主页 this.$router.push('/home') } else { // 登录失败 localStorage.removeItem('token') } } } } </script> <style lang="less" scoped> .login-container { background-color: #35495e; height: 100%; .login-box { width: 400px; height: 250px; 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; } .avatar-box { position: absolute; width: 100%; top: -65px; left: 0; .avatar { width: 120px; height: 120px; border-radius: 50% !important; box-shadow: 0 0 6px #efefef; } } </style>
退出登录
<template> <div class="layout-header-container d-flex justify-content-between align-items-center p-3"> <!-- 左侧 logo 和 标题区域 --> <div class="layout-header-left d-flex align-items-center user-select-none"> <!-- logo --> <img class="layout-header-left-img" src="../../assets/heima.png" alt="" /> <!-- 标题 --> <h4 class="layout-header-left-title ml-3">黑马后台管理系统</h4> </div> <!-- 右侧按钮区域 --> <div class="layout-header-right"> <button type="button" class="btn btn-light" @click="logout">退出登录</button> </div> </div> </template> <script> export default { name: 'MyHeader', methods: { logout() { // 1. 清空 token localStorage.removeItem('token') // 2. 跳转到登录页面 this.$router.push('/login') } } } </script> <style lang="less" scoped> .layout-header-container { height: 60px; border-bottom: 1px solid #eaeaea; } .layout-header-left-img { height: 50px; } </style>