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 相关文章推荐
面向对象的javascript(笔记)
Oct 06 Javascript
jquery提取元素里的纯文本不包含span等里的内容
Sep 30 Javascript
JavaScript性能优化之小知识总结
Nov 20 Javascript
jQuery与JavaScript节点创建方法的对比
Nov 18 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
Apr 10 Javascript
react native仿微信PopupWindow效果的实例代码
Aug 07 Javascript
详解Angular系列之变化检测(Change Detection)
Feb 26 Javascript
AngularJS select加载数据选中默认值的方法
Feb 28 Javascript
vue3.0 搭建项目总结(详细步骤)
May 20 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
Aug 16 Javascript
原生js实现日历效果
Mar 02 Javascript
vue 判断元素内容是否超过宽度的方式
Jul 29 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
第十二节--类的自动加载
2006/11/16 PHP
zend framework框架中url大小写问题解决方法
2014/08/19 PHP
jQuery ajax 路由和过滤器使用说明
2011/08/02 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
2013/10/20 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
JavaScript动态修改网页元素内容的方法
2015/03/21 Javascript
理解javascript中的MVC模式
2016/01/28 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
2016/02/12 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
2016/08/09 Javascript
jquery仿ps颜色拾取功能
2017/03/08 Javascript
jquery实现图片平滑滚动详解
2017/03/22 jQuery
js数字滑动时钟的简单实现(示例讲解)
2017/08/14 Javascript
vue.js中实现登录控制的方法示例
2018/04/23 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
2018/07/03 jQuery
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
小程序自定义模板实现吸顶功能
2020/01/08 Javascript
vue 动态组件用法示例小结
2020/03/06 Javascript
Python实现PS滤镜的旋转模糊功能示例
2018/01/20 Python
python队列Queue的详解
2019/05/10 Python
python卸载后再次安装遇到的问题解决
2019/07/10 Python
Django通用类视图实现忘记密码重置密码功能示例
2019/12/17 Python
python3通过subprocess模块调用脚本并和脚本交互的操作
2020/12/05 Python
轻松掌握CSS3中的字体大小单位rem的使用方法
2016/05/24 HTML / CSS
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
英国时尚家具、家居饰品及礼品商店:Graham & Green
2016/09/15 全球购物
美国百年历史早餐食品供应商:Wolferman’s
2017/01/18 全球购物
独特的礼品和创新的科技产品:The Grommet
2018/02/24 全球购物
VC++笔试题
2014/10/13 面试题
岗位竞聘演讲稿
2014/01/10 职场文书
户籍证明的格式
2014/01/13 职场文书
安全大检查反思材料
2014/01/31 职场文书
2014年党支部承诺书
2014/05/30 职场文书
会展策划与管理专业求职信
2014/06/09 职场文书
学习群众路线的心得体会
2014/11/05 职场文书
2016大一新生军训心得体会
2016/01/11 职场文书
新手初学Java List 接口
2021/07/07 Java/Android