一步一步学Vue(七)

  前言:我以后在文章最后再也不说我下篇博文要写什么,之前说的大家也可以忽略,如果你不忽略,会失望的?,不过说出去的话还是要表示一下的,简单介绍一下路由钩子:

  正如其名,vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子:全局的, 单个路由级的, 或者组件级的。

  1、全局钩子

  使用 router.beforeEach 注册一个全局的 before 钩子:

var router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // TODO:处理跳转逻辑
})

to: Route: 即将要进入的目标 路由对象

  from: Route: 当前导航正要离开的路由

  next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

  2、局部钩子

  故名思意,单个路由项的配置钩子函数:

var router = new VueRouter({
  routes: [
    {
      path: '/about',
      component: AboutComponent,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

  3、组件级钩子

  上篇中已经介绍了一个beforeRouteUpdate 用来解决路由改变但是组件重用的问题,除了这个钩子函数,还包含

  • beforeRouteEnter
  • eforeRouteLeave
var Compoent = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被确认前调用
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变,但是该组件被复用时调用,上篇文章已经使用过
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
  }
}

  Ok,上文留的坑表示完了,以后会继续讲的,主要没有考虑好好的使用场景,就简单的介绍一下了,这一篇文字内容会比较多,虽然我不太喜欢文字,但是没办法,说的少了反而说不清楚,见谅见谅。下文正式开始本篇主要内容。

今天主要说一下前后端分离模式下的认证和授权,讲这个也只是心血来潮,大家也可以放松的看一下,一起讨论下方案,可以完善一下用于SPA解决方案。

  现在前后端分离模式盛行,如果不考虑SEO等影响,SPA不失为一种很好的方案,这里简单的列一下其与传统web开发区别:

  1、传统web开发,每次请求都是请求完整的html,而spa每次都是局部请求并且是Ajax的;

  2、传统web开发,数据和格式(data和html)是在服务器端拼接构建,直接返回到浏览器端直接渲染;而spa,则是请求html片段后请求数据,在客户端通过客户端模版引擎构建后渲染的;

  3、传统web开发,前后端不分离,好多时候前端工作内容就是静态页面,所有的业务逻辑都在服务端;前后端分离后,大大增加前端的比重,一定程度上减轻了服务端的负担,让前端有了大前端的概念,让前端升职加薪块了很多,这是挑战也是喜事儿,以后再也不会有人说前端是切页面的了;

4、spa开发模式,前后通过json交互,更加轻量级,后端接口对于前端来说就是数据服务;nodejs的出现,让前端开发更往后了一层,有了前端的服务端(也就是中间层)的概念。

  我在做前后端分离架构时,一般的思路是:nginx作为前端服务器,并负责请求转发(不加入node层,如果加入node层,可以直接去掉nginx),也就是兼反向代理服务器,后台通过rest接口提供服务;使用node或者nginx的好处是,可以很方便的处理跨域问题,如果不明白的,可百度或留言,今天网络不给力,很多node模块安装不了,只能以伪代码的方式讲思路了,大家见谅。

  对于需要授权的服务我们需要覆盖以下用例:

  1、用户未登录只能打开登录页面;

 2、用户登录信息有误,登录失败

  3、用户登录信息正确,服务端分配token,用于请求rest接口

  4、用户登录后请求资源,可正常返回;

  5、用户登录后token过期,请求rest接口资源,返回401;

  6、附带无效token请求资源,返回401

  针对上述用例,客户端设计时需要完成如下几个功能:

  1、注册vue路由钩子函数,beforeEnter,在每次路由跳转前,进行路由检查,判断token是否存在;如果不存在,则打开到login页面,如果存在,则可以执行路由next操作

  2、针对每次请求的ajax操作,拦截所有请求操作,加入token到http头;拦截所有响应操作,对401等特殊状态码进行处理或者跳转。

  客户端可能的伪代码如下:

var LoginComponent = {
    template: `
    
     <div class="login" >
        username:<input type="text" v-model="user.username" />
        password:<input type="password" v-model="user.password" />
        <input type="button" @click="login()" value="login" />
     </div>
    `,
    data: function () {
        return {
            user: {
                username: '',
                password: ''
            }
        }
    },
  //其它组件省略。。。

    methods: {
        /**
         * 登录后保存token到localStorage
         */
        login: function () {
            ajaxPost('/login', this.user).then(res => {
                localStorage.setItem('token', res.data.token);
                //保存后执行跳转,跳转到路由query中传递的地址
            }, err => console.log(err))
        }
    }
}

var router = new VueRouter({
    //TODO:各种路由定义;
    routes: [
        {
            name: 'login', path: '/loin', component: LoginComponent
        }
    ]
});

//注册全局事件钩子
router.beforeEnter(function (to, from, next) {
    if (!localStorage.getItem('token')) {
        next({
            path: '/login',
            query: { redirect: to.fullPath }
        })
    } else {
        next();//如果存在token、则继续前进
    }
});

服务端需要做的工作:

  1、判断是否是登录请求,如果是登录请求,不检查http header中的token;验证用户信息,如果验证通过,则创建token,设置过期时间并返回;如果验证不通过,则返回错误信息即可;

  2、在非登录请求的情况下(这里基于jwt生成token),获取http header中token,如果获取不到,则直接返回401,并提示token无效;获取token后,使用服务端密钥,对token进行解密,如果解密失败,则说明token无效,返回401;如果解密成功,则判断是否过期,如果已过期,则返回401,并提示token已过期。(jwt一般会使用「sub,exp,iat等字段;其中包含了主题部分,创建时间戳等各种,可以满足绝大多数场景」)

  服务端可能的伪代码如下(基于Express 4.x):

var express = require("express");

var app = express();

//鉴权中间件
app.use(function (req, res, next) {
    if (req.path === '/login') {
        //TODO:进行登录验证,并响应token
        res.json({
            success: true,
            data: {
                token: 'xxxxxx'
            }
        })
    } else {
        var token = req.headers['Authorization'];
        //TODO:判断请求是否合法
        //如果不合法,这里直接返回401 ,并提示信息
        if (!valid(token)) {
            res.status(401)
        } else {
            //如果合法 执行next操作
            next();
        }

    }
});

//其它路由服务
//app.get('xxxx')
//...其它路由服务

app.listen(80,function(){
    console.log("port 80 is listenning!!!");
})

  上面的代码经过完善后是可以运行的,今天时间比较仓促,就写这么多吧,虽然我不准备说一下篇的内容是什么,但是下一篇至少要完成这个认证的demo的,对于node平台的基础知识希望读者有一个简单的了解,这样对后台的处理也会有帮助。

  ps:今天家里网络超级慢,下载一个express模块近三个小时,重试了好几次,还是不行,放弃了。下雨网络也慢,服了。。。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Jerry的SAP技术分享

如何查看CRM WebUI,C4C和Hybris里的页面技术信息

在WebClient UI页面上按F2,就能看到页面的技术信息, 可以找到当前页面是哪一个BSP component实现的:

3284
来自专栏张善友的专栏

WCF的追踪分析工具——SvcPerf

Microsoft最近发布了SvcPerf,它是一个端到端的基于Windows事件追踪(ETW)的追踪查看器,可用于基于清单的追踪。你能够通过这个工具查看ETL...

1786
来自专栏HTML5学堂

iframe跨域应用 - 使用iframe提交表单数据

之前我们提到了iframe跨域,今天我们在原有的基础之上进行“实例”的讲解。通过iframe跨域实现表单数据的提交。如果想了解iframe跨域,可以发送“ifr...

3595
来自专栏北京马哥教育

Tmux:Linux 从业者必备利器

tmux 为什么要用tmux tmux是什么?tmux是linux中一种管理窗口的程序。那么问题来了:Mac自带的Iterm2很好用啊。既支持多标签,也支持窗...

2584
来自专栏阿炬.NET

ASP.NET MVC 4 中Jquery上传插件Uploadify简单使用-版本:3.2.1

2715
来自专栏前端架构与工程

boi剖析 - 基于webpack的css sprites实现方案

本文是58到家前端工程化集成解决方案boi的博文系列之一。boi是基于webpack打造的一站式前端工程化解决方案,现已开源Github。 作为前端构建工具不...

2639
来自专栏Sorrower的专栏

快速上手ndk开发! Mac/Win下配置和使用!(2018.4重编版)

523
来自专栏安富莱嵌入式技术分享

【安富莱二代示波器教程】第5章 示波器设计—波形快速刷新方案

波形快速刷新有很多方案需要测试,由于我们的GUI是采用的emWin,所以下面的这些测试都是基于emWin实现的。

782
来自专栏Albert陈凯

Hadoop数据分析平台实战——250JSSDK数据收集引擎编写离线数据分析平台实战——250JSSDK数据收集引擎编写

离线数据分析平台实战——250JSSDK数据收集引擎编写 JsSDK设计规则 在js sdk中我们需要收集launch、pageview、chargeReque...

3298
来自专栏用户2442861的专栏

Springmvc+uploadify实现文件上传

   网上看了很多关于文件上传的帖子,众口不一,感觉有点乱,最近正好公司的项目里用到JQuery的uploadify控件做文件上传,所以整理下头绪,搞篇文档出来...

572

扫码关注云+社区