今天咱来实现后台的登录。
首先我们的后台需要三个控制器：
- PostController：管理文章。
- TagController：管理文章标签。
- UploadController：上传文件。
当我们访问后台时需要登录 就要实现自动跳转到登录界面。
1 编写路由
/** * Home */ Route::get('/', function () { // 重定向到 /blog 路由 return redirect('/blog'); }); Route::get('/blog', 'BlogController@index'); Route::get('/blog/{slug}', 'BlogController@showPost'); /** * 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', 'UploadController@index'); }); // login and logout Route::get('/auth/login', 'AuthAuthController@getLogin'); Route::post('/auth/login', 'AuthAuthController@postLogin'); Route::get('/auth/logout', 'AuthAuthController@getLogout');
解读：我们聚焦在 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