今天咱来实现后台的登录。
首先我们的后台需要三个控制器：
- PostController：管理文章。
- TagController：管理文章标签。
- UploadController：上传文件。
当我们访问后台时需要登录 就要实现自动跳转到登录界面。
1 编写路由
/**
* Home
*/
Route::get(‘/‘, function () {
// 重定向到 /blog 路由
return redirect(‘/blog‘);
});
Route::get(‘/blog‘, ‘[email protected]‘);
Route::get(‘/blog/{slug}‘, ‘[email protected]‘);
/**
* Admin
*/
Route::get(‘/admin‘, function (){
return redirect(‘/admin/post‘);
});
Route::group([‘namespace‘ => ‘Admin‘, ‘middleware‘ => ‘auth‘, ‘prefix‘ => ‘admin‘], function(){
Route::resource(‘post‘, ‘PostController‘);
Route::resource(‘tag‘, ‘TagController‘);
Route::get(‘upload‘, ‘[email protected]‘);
});
// login and logout
Route::get(‘/auth/login‘, ‘Auth\[email protected]‘);
Route::post(‘/auth/login‘, ‘Auth\[email protected]‘);
Route::get(‘/auth/logout‘, ‘Auth\[email protected]‘);
解读：我们聚焦在 Admin 注释后的代码，首先三个控制器的路由都需要Auth中间件，Auth中间件是保护这些路由的 需要登录后才可以访问，
然后是 login and logout 注释区，注册三条用户认证的路由。
2 创建控制器
php artisan make:controller Admin\\PostController php artisan make:controller Admin\\TagController php artisan make:controller Admin\\UploadController --plain
我们几天只实现PostController的index方法：
public function index()
{
return view(‘admin.post.index‘);
}
3 创建视图
3.1 创建后台父模板
我们要使用blade模板特性，先来创建一个后台的layout，模板路径：views/admin/layout.blade.php，所有后台的页面都要继承它：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ config(‘blog.title‘) }} 后台</title>
{{--CSS--}}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
@yield(‘styles‘)
</head>
<body>
{{-- Navigation Bar --}}
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">{{ config(‘blog.title‘) }} Admin</a>
</div>
<div class="collapse navbar-collapse" id="navbar-menu">
@include(‘admin.partials.navbar‘)
</div>
</div>
</nav>
{{--content--}}
@yield(‘content‘)
{{--JS--}}
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
@yield(‘scripts‘)
</body>
</html>
这个父模板引入了一个视图，挂了三个钩子：
- @include(‘admin.partials.navbar‘)：引入一个navbar视图。
- @yield(‘styles‘)：styles钩子，允许子视图额外引入其他的css样式。
- @yield(‘content‘)：content钩子，子视图的所有内容都将挂到这个钩子上。
- @yield(‘scripts‘)：scripts钩子，允许子视图额外引入其他的js代码。
后台父模板引入了navbar视图 现在就来创建navbar视图：
<ul class="nav navbar-nav">
<li><a href="/">Blog Home</a></li>
@if (Auth::check())
<li @if (Request::is(‘admin/post*‘)) class="active" @endif>
<a href="/admin/post">Posts</a>
</li>
<li @if (Request::is(‘admin/tag*‘)) class="active" @endif>
<a href="/admin/tag">Tags</a>
</li>
<li @if (Request::is(‘admin/upload*‘)) class="active" @endif>
<a href="/admin/upload">Uploads</a>
</li>
@endif
</ul>
<ul class="nav navbar-nav navbar-right">
@if (Auth::guest())
<li><a href="/auth/login">Login</a></li>
@else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-expanded="false">
{{ Auth::user()->name }}
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="/auth/logout">Logout</a></li>
</ul>
</li>
@endif
</ul>
3.2 创建登录表单
@extends("admin.layout")
@section("content")
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Login</div>
<div class="panel-body">
@include(‘admin.partials.error‘)
<form class="form-horizontal" role="form" method="POST"
action="{{ url(‘/auth/login‘) }}">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="form-group">
<label class="col-md-4 control-label">E-Mail Address</label>
<div class="col-md-6">
<input type="email" class="form-control" name="email" value="{{ old(‘email‘) }}" autofocus>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Password</label>
<div class="col-md-6">
<input type="password" class="form-control" name="password">
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Remember Me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<button type="submit" class="btn btn-primary">Login</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
上面引入了一个错误视图，看看错误视图是怎么写的：
@if (count($errors) > 0)
<div class="alert alert-danger">
<strong>Whoops!</strong>
There were some problems with your input.<br><br>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
4 修改AuthController
当我们创建好视图后测试登录登出 代码是没问题 能跑通 但是存在一个问题，我们登出后跳转到了首页 而不是后台登录界面。
原因是登出代码在 AuthenticateUsers trait 中的 getLogout方法。我们需要做两件事：
- 修改重定向路径。
- 移除AuthenticatesAndRegistersUsers trait 因为我们不允许用户注册，把它替换成：AuthenticatesUsers, ThrottlesLogins 这两个trait。
use AuthenticatesUsers, ThrottlesLogins;
protected $redirectAfterLogout = ‘/auth/login‘;
protected $redirectTo = ‘/admin/post‘;
在 AuthController 中添加这些代码，其他的不用动。
修改 RedirectIfAuthenticated 这个middleware：
public function handle($request, Closure $next)
{
if ($this->auth->check()) {
return redirect(‘/admin/post‘);
}
return $next($request);
}
5 创建post.index视图
@extends(‘admin.layout‘)
@section(‘content‘)
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Posts</h3>
</div>
<div class="panel-body">
日后展示
</div>
</div>
</div>
</div>
@endsection
时间： 2024-10-20 17:09:05