laravel+vue跳转拦截器

这两天写项目的时候遇到的一个问题：基于laravel和vue实现的后台系统，实现跳转拦截，在前端页面跳转的时候判断用户是否已经登录，若没有就跳到登录界面。
总的来说，我有已下两种解决思路：

1. 在laravel中使用中间件，然后在渲染界面的时候使用中间件。

在laravel中的 /app/Http/Middleware/下定义了一个CheckLogin.php中间件，内容如下

namespace App\Http\Middleware;

use Closure;
use Illuminate\Support\Facades\Auth;

class CheckLogin
{
    /**
     * Handle an incoming request.
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        if(empty(Auth::id()))
            return  redirect('/');
        else    
            return $next($request);
    }
}

然后在Kernel.php中注册一下

    protected $routeMiddleware = [
        'auth' => \Illuminate\Auth\Middleware\Authenticate::class,
            ...
        'checkLogin' => \App\Http\Middleware\CheckLogin::class,
    ];

然后再在 vue中的main.js中添加拦截器：

window.axios.interceptors.response.use(
    response => {
        return response;
    },
    error => {
        //请求错误时做些事
        if (error.response) {
            switch (error.response.status) {
                case 403:
                    location.href='/login';  
                    break;
                case 200:
                    window.location.href = "/";
                    break;
            }
        }
        return Promise.reject(error.response.data);

    });

2. 使用vue路由的requireAuth关键字，判断该路由的访问是否需要登录。

首先在定义路由的时候就需要多添加一个自定义字段requireAuth，用于判断该路由的访问是否需要登录。如果用户已经登录，则顺利进入路由， 否则就进入登录页面。在路由管理页面添加meta字段

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)
const routes = [
    {
        path: '/',
        name: "欢迎",
        meta: {
            requireAuth: true,  // 添加该字段，表示进入这个路由是需要登录的
        },
        component: resolve => require(["../components/Hello.vue"], resolve)
    },
    {
        path: '/login',
        name: "登录",
        component: resolve => require(["../view/login/login.vue"], resolve)
    }
]

定义完路由后，我们主要是利用vue-router提供的钩子函数beforeEach()对路由进行判断。

router.beforeEach((to, from, next) => {
  //NProgress.start();
  if (to.path == '/login') {
    sessionStorage.removeItem('user');
  }
  let user = JSON.parse(sessionStorage.getItem('user'));
  // 判断该路由是否需要登录权限，如果登录过会获取到user的信息。
  if (!user && to.path != '/login') {
    next({ path: '/login' })
  } else {
    next()
  }
})

每个钩子方法接收三个参数：

• to: Route: 即将要进入的目标 路由对象
• from: Route: 当前导航正要离开的路由
• next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
• next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。
• next(false): 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址。
• next(‘/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。

确保要调用 next 方法，否则钩子就不会被 resolved。

其中，sessionStorage.getItem(‘user’) 获取用户信息，判断是否登录。我们需要在用户登录的时候记录下登录状态，就可以通过vue-router来阻止页面跳转了。

总结
这两种方法都可以实现跳转拦截，各自的优缺点的使用中间件可能会更安全，但使用中间件阻止跳转的的话，登录界面就不能引用中间件，所以需要把登录界面从vue后台中独立出来。使用vue-router阻止的话，别人可能会通过阻止js来绕过（我没试过，不确定），但是会更少的请求后台，项目目录也会更清晰。只能说各有各的特点。