Nuxt的动态路由和参数校验操作


Posted in Javascript onNovember 09, 2020

其实动态路由就是带参数的路由。比如我们现在新闻模块下面有很多新闻详情页,这时候就需要动态路由的帮助了。

新闻详细页面

我们在news文件夹下面新建了_id.vue的文件,以下划线为前缀的Vue文件就是动态路由,然后在文件里边有$route.params.id来接收参数。

/pages/news/_id.vue

<template>
 <div>
  <h2>News-Content{{$route.params.id}}</h2>
  <ul>
   <li><a href="/" rel="external nofollow" rel="external nofollow" >Home</a></li>
  </ul>
 </div>
</template>

Nuxt的动态路由和参数校验操作

修改新闻首页路由

我们在/pages/news/index.vue进行修改,增加两个详细页的路由News-1和News-2.

<template>
 <div>
  <h2>News Index page</h2>
  <p>NewID:{{$route.params.newsId}}</p>
  <ul>
   <li><nuxt-link :to="{name:'index'}">Home</nuxt-link></li>
   <li><a href="/news/123" rel="external nofollow" rel="external nofollow" >News-1</a></li>
   <li><a href="/news/456" rel="external nofollow" >News-2</a></li>
  </ul>
 </div>
</template>
<script>
export default {

}
</script>

Nuxt的动态路由和参数校验操作

动态参数校验

进入一个页面,对参数传递的正确性校验是必须的,Nuxt.js也贴心的为我们准备了校验方法validate()。 /pages/news/_id.vue

<template>
 <div>
  <h2>News-Content{{$route.params.id}}</h2>
  <ul>
   <li><a href="/" rel="external nofollow" rel="external nofollow" >Home</a></li>
  </ul>
 </div>
</template>
<script>
export default {
 validate({params}){
  // Must be a number
  return /^\d+$/.test(params.id)
 }
}
</script>

/pages/news/index.vue

<template>
 <div>
  <h2>News Index page</h2>
  <p>NewID:{{$route.params.newsId}}</p>
  <ul>
   <li><nuxt-link :to="{name:'index'}">Home</nuxt-link></li>
   <li><a href="/news/123" rel="external nofollow" rel="external nofollow" >News-1</a></li>
   <li><a href="/news/a" rel="external nofollow" >News-2</a></li>
  </ul>
 </div>
</template>
<script>
export default {

}
</script>

Nuxt的动态路由和参数校验操作

Nuxt的动态路由和参数校验操作

我们使用了validate方法,并把params传递进去,然后用正则进行了校验,如果正则返回了true正常进入页面,如果返回false进入404页面。

补充知识:Nuxt 实现用户鉴权登陆

引言

博客前台重构完毕了,接下来就是后台部分了,后台的主要功能就是发布、删除、修改文章,自然不是谁都能随便进的。在 vue 项目中,我是在 Vue Router 的全局前置守卫里判断当前用户是否有 cookie 从而判断是否有权进入后台。而 Nuxt 相比 Vue 项目最大的不同之一就是没有使用 Vue Router 而是使用 目录来进行页面路由,自然我们就失去了 全局前置守卫这个利器,当然 Nuxt 是有解决办的,不过在那之前我们需要先来了解一下鉴权的原理。

Cookie 和 Session

相信前端的同学们对这两个名字早就有所耳闻,却不一定有详细的了解。众所周知,我们浏览网页使用的 HTTP 协议是无状态的的,也就是说你每一次请求对于服务器来说都是一样的,它没有办法记住这个请求是你发的。所以这里就要用到Cookie。

Cookie 是服务端设置的,由浏览器储存在你的硬盘中的一组数据,,比如你的用户 数据,每次向服务器发送请求就会携带上这个数据。服务器查看就能知道这是谁发过来的。这一过程就称为Session(会话)

Session 初始是指一种概念,是你和网站发生交互的一个周期。在这个周期中服务器就是通过储存在浏览器的 Cookie 来判别你是谁。但是因为储存在本地的Cookie并不安全,谁都可以看到并更改,所以现在更为流行的做法是仅仅通过 Cookie 保存 的唯一的用户标识符(SessionID)来识别用户,而用户信息储存在服务器端。所以 Session 这个概念可以说是 Cookie 的上级也可以说是其同级

Nuxt 鉴权

讲解了 Nuxt 鉴权的基本原理,我们可以知道鉴权就是在在用户进入这个页面的时候对本地的 Cookie 进行判断,存在设置好的 Cookie 那么说明这个用户已经登陆过了,放他过去。啥也没有? 不行你去给我登陆,就跳转到登录页面。明白了这个流程就开始具体的工作了。

服务器端

在服务器端我们使用 koa-session 安装 koa-session

npm install koa-session

npm install koa-session-mongoose //使用 mongodb 储存 Session 信息

然后在入口文件中这样使用

app.use(
 session(
  {
   key: "***",     //加密密钥
   overwrite: true,  //覆写Cookie
   httpOnly: true,   //经允许通过 JS 来更改
   renew: true,
   store: new MongooseStore({
    createIndexes: "appSessions",
    connection: mongoose,
    expires: 86400, // 1 day is the default
    name: "AppSession"
   })         //传入一个用于session的外部储存,我这里是使用了 mongodb 
  },
  app
 )
);

因为 koa 默认会把 Session 打到 ctx.session 中,不方便用户端获取,所以我们把它移一下位,挪到 ctx.req.session 中

app.use((ctx) => {
  ctx.status = 200
  ctx.respond = false // Bypass Koa's built-in response handling
  ctx.req.session = ctx.session
  ctx.req.ctx = ctx // This might be useful later on, e.g. in nuxtServerInit or with nuxt-stash
   return new Promise((resolve, reject) => {
    ctx.res.on('close', resolve)
    ctx.res.on('finish', resolve)
    nuxt.render(ctx.req, ctx.res, promise => {
     // nuxt.render passes a rejected promise into callback on error.
     promise.then(resolve).catch(reject)
    })
   })
 })

这是登陆函数,查询数据库是否又对应的用户名和密码,存在的话,给客户端设置一个 Cookie 返回登录成功

static async login(ctx) {
  let { passwd, email } = ctx.request.body;
  let hasuser = await UserModel.findOne({ email: email, passwd: md(passwd) });

  if (!hasuser) {
   return ctx.error({});
  }
  else {
   let userid = hasuser._id;
   const { session } = ctx;
   session.userid = userid;
   return ctx.success({ data: { userid: userid } });
  }
 }

服务端设置完成了

客户端(Nuxt)

其实以上的步骤和 Vue 项目中一模一样,Nuxt 中主要的不同就是失去了全局前置守卫,那么要在哪里判断是否存在 Cookie 呢,别急,Nuxt 官方自然是给了解决方案,先看一下 Nuxt 的生命周期

image

这里我们用到的就是红框中的 nuxtServerInit 和 middleware 这两个时期,先来看代码

// store/index.js Vuex 文件中
export const actions = {
 // nuxtServerInit is called by Nuxt.js before server-rendering every page
 nuxtServerInit({ commit }, { req }) {
  if (req.session && req.session.userid) {
   console.log("用户已经登录");
   commit("SET_USER", req.session.userid);
  }
 },
 
 export const mutations = {
 SET_USER(state, user) {
  state.authUser = user;
 },
 }

Store action 模块中的 nuxtServerInit 函数是整个生命周期 最先运行的,我们就在这里判断当前用户浏览器中是否有 Cookie ,如果有的话就在 state 中用一个字段保存下来。是不是还挺像全局前置守卫。这里还只是做了判断,打上了印记你登没登陆,拦截在哪里呢,别急,就是下一个流程 middleware 中。

打开 middleware 文件夹( Nuxt 项目自带),新建 auth.js 文件

// auth.js
export default function ({ store, redirect }) {
 if (!store.state.authUser) {
  return redirect('/welcome')
 }
}

瞧一下 Vuex 中看看你有没有登陆,没有的话把你送到登陆页面去,简单直接吧,只要在需要鉴权的页面引用这个中间件即可,对于此项目只要在后台管理页面引用就好

export default {
  middleware: 'auth',
};

总结

就这样完成了鉴权的操作,没有登陆过的用户在访问后台是时候会被重定向到登陆页面去,就是很简单的使用了一下 Cookie ,限于项目性质,session 的很多功能并没有用到,比如在服务器端储存用户信息。主要是它的功能也就是防止别人访问后台,非常简单。

以上这篇Nuxt的动态路由和参数校验操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
为超链接加上disabled后的故事
Dec 10 Javascript
js 窗口抖动示例
Sep 04 Javascript
js统计页面的来访次数实现代码
May 09 Javascript
JavaScript中的getMilliseconds()方法使用详解
Jun 10 Javascript
基于Bootstrap重置输入框内容按钮插件
May 12 Javascript
Canvas 制作动态进度加载水球详解及实例代码
Dec 09 Javascript
通过AngularJS实现图片上传及缩略图展示示例
Jan 03 Javascript
基于ajax和jsonp的原生封装(实例)
Oct 16 Javascript
bootstrap动态调用select下拉框的实例代码
Aug 09 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
Oct 20 Javascript
Vue.js仿Select下拉框效果
Feb 18 Javascript
vue中jsonp插件的使用方法示例
Sep 10 Javascript
jQuery实现移动端扭蛋机抽奖
Nov 08 #jQuery
JS实现炫酷轮播图
Nov 15 #Javascript
JS实现购物车基本功能
Nov 08 #Javascript
Vue实现购物车基本功能
Nov 08 #Javascript
vue实现顶部菜单栏
Nov 08 #Javascript
Vue实现菜单切换功能
Nov 08 #Javascript
JS使用setInterval计时器实现挑战10秒
Nov 08 #Javascript
You might like
《超神学院》霸气归来, 天使彦上演维多利亚的秘密
2020/03/02 国漫
PHP写入WRITE编码为UTF8的文件的实现代码
2008/07/07 PHP
本地计算机无法启动Apache故障处理
2014/08/08 PHP
Zend Framework分页类用法详解
2016/03/22 PHP
php导出csv文件,可导出前导0实例代码
2016/11/16 PHP
php中static 静态变量和普通变量的区别
2016/12/01 PHP
新手入门常用代码集锦
2007/01/11 Javascript
js判断变量是否空值的代码
2008/10/26 Javascript
javascript加号&quot;+&quot;的二义性说明
2013/03/04 Javascript
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
JS+JSP checkBox 全选具体实现
2014/01/02 Javascript
使用jQuery判断IE浏览器版本的代码
2014/06/14 Javascript
JavaScript获取表单内所有元素值的方法
2015/04/02 Javascript
一种新的javascript对象创建方式Object.create()
2015/12/28 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
2016/05/20 Javascript
javascript表单控件实例讲解
2016/09/13 Javascript
JS实现滑动门效果的方法详解
2016/12/19 Javascript
EL表达式截取字符串的函数说明
2017/09/22 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
2017/11/03 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
2018/01/09 Javascript
如何更好的编写js async函数
2018/05/13 Javascript
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
JS高阶函数原理与用法实例分析
2019/01/15 Javascript
vue实现户籍管理系统
2020/05/29 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
2020/08/31 Javascript
Django 视图层(view)的使用
2018/11/09 Python
使用python实现下载我们想听的歌曲,速度超快
2020/07/09 Python
基于selenium及python实现下拉选项定位select
2020/07/22 Python
python利用faker库批量生成测试数据
2020/10/15 Python
爱他美官方海外旗舰店:Aptamil奶粉
2017/12/22 全球购物
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
一份软件工程师的面试试题
2016/02/01 面试题
秋天的雨教学反思
2014/04/27 职场文书
物资采购管理制度
2015/08/06 职场文书
《槐乡的孩子》教学反思
2016/02/20 职场文书
日元符号 ¥
2022/02/17 杂记