基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(二十六) —— 根据是否需要登录重新组织后端路由

到目前为止,我们的 Roast 应用必须登录后才能使用,这在开发环境没啥问题,但是如果作为实际产品发布则很影响用户体验,所以我们有必要对应用不同功能的访问权限重新进行组织。

第一步:重新组织 API 路由

首先从路由着手,对应用而言,一般首页、列表页、详情页都应该是可以公开访问的,只有新增、编辑、喜欢、取消喜欢等与用户相关的功能需要登录后才能访问。我们姑且将不需要登录即可访问的路由称之为公有路由,讲需要登录才能访问的路由称之为私有路由,接下来我们以是否需要登录才能访问将路由分为公有路由和私有路由两部分,打开 routes/api.php 文件,为公有路由定义路由分组:

// 公有路由,无需登录即可访问
Route::group(['prefix' => 'v1'], function(){

});

然后我们把之前定义在私有路由分组中的下列 GET 路由都移到公有路由分组中:

  • GET /api/v1/cafes
  • GET /api/v1/cafes/{id}
  • GET /api/v1/brew-methods
  • GET /api/v1/tags
  • GET /api/v1/user

这样,在私有路由分组剩下都是下面这些路由:

  • POST /api/v1/cafes
  • GET /api/v1/cafes/{id}/edit(待实现)
  • PUT /api/v1/cafes/{id}(待实现)
  • POST /api/v1/cafes/{id}/like
  • DELETE /api/v1/cafes/{id}/like
  • POST /api/v1/cafes/{id}/tags
  • DELETE /api/v1/cafes/{id}/tags/{tagID}

这样,新的路由分组就完成了,接下来我们讲之前的 user 路由实现方式调整为通过控制器实现:

Route::get('/user', 'API\UsersController@getUser');

为此我们需要创建一个新的 UsersController 控制器:

php artisan make:controller API/UsersController

然后在新生成的 app/Http/Controllers/API/UsersController.php 控制器中编写一个 getUser() 方法,注意我们是在 API 中访问,所以需要通过 Auth::guard('api') 指定:

public function getUser(){
    return Auth::guard('api')->user();
}    

调整后的完整路由文件可参考这里:https://github.com/nonfu/roastapp/blob/master/routes/api.php

第二步:移除老的登录界面

除此之外,我们还要调整用户登录实现方式,将之前页面跳转到登录视图进行登录的方式修改为用户在前端通过 Vue 组件在单页面应用中无跳转登录,具体实现我们将在下一篇教程中讨论,在这篇教程中,我们先为此做好准备工作。

首先在 routes/web.php 中移除老的登录路由:

Route::get('/login', 'Web\AppController@getLogin' )
    ->name('login')
    ->middleware('guest');

同时移除 app/Http/Controllers/Web/AppController.php 中的 getLogin() 方法,然后删除 resources/views/login.blade.php 视图文件。

最后将 Web/AppController.php 中的 getLogout() 方法以及 Web/AppController.php 中的 getSocialRedirect() 方法里面的重定向链接修改为 /

第三步:移除 / 路由上的认证中间件

最后,我们将 routes/web.php 中的 / 路由上定义的认证中间件删除:

Route::get('/', 'Web\AppController@getApp');

这样用户不用登录就可以直接访问应用首页了:

下一篇教程我们将实现在单页面应用中通过 Vue 组件实现页面无跳转登录。

学院君 has written 1223 articles

Laravel学院院长,终身学习者

积分:163542 等级:P12 职业:手艺人 城市:杭州

2 条回复

  1. 学院君 学院君 says:
    @ Totn

    因为在 config/app 里面的 aliases 里面注册了:

    'Auth' => Illuminate\Support\Facades\Auth::class,

    它俩是等价的

  2. Totn Totn says:

    院长新年好~ 我跟到这里的时候发我代码里并没有Web\AppController@getLogout这个方法,查看源码,发现引入了Auth,不过奇怪的是,源码里直接

    use Auth;

    而我在编辑器里是这样引入的:

    use Illuminate\Support\Facades\Auth;

    经测试两种引入都不会报错。是什么原因呢,我这样写会不会有什么问题?

登录后才能进行评论,立即登录?