一步一步学Vue

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一步一步学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模块近三个小时,重试了好几次,还是不行,放弃了。下雨网络也慢,服了。。。

  

 

 

 

  

 

以上是关于一步一步学Vue的主要内容,如果未能解决你的问题,请参考以下文章

一步一步学Vue

一步一步学Vue

一步一步学Vue

一步一步学Vue

一步一步学ROP Linux x86

一步一步学习Vue