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 相关文章推荐
js中设置元素class的三种方法小结
Aug 28 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
Dec 08 Javascript
javascript实现tab切换的四种方法
Nov 05 Javascript
BootStrap 实现各种样式的进度条效果
Dec 07 Javascript
AngularJS指令与控制器之间的交互功能示例
Dec 14 Javascript
基于AngularJS实现表单验证功能
Jul 28 Javascript
详解React中的组件通信问题
Jul 31 Javascript
vue教程之toast弹框全局调用示例详解
Aug 24 Javascript
JS设计模式之命令模式概念与用法分析
Feb 06 Javascript
微信小程序实现滑动切换自定义页码的方法分析
Dec 29 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
Sep 11 Javascript
JavaScript实现点击出现子菜单效果
Feb 08 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/10/09 PHP
php面向对象全攻略 (十五) 多态的应用
2009/09/30 PHP
url decode problem 解决方法
2011/12/26 PHP
php中拷贝构造函数、赋值运算符重载
2012/07/25 PHP
php中删除数组的第一个元素和最后一个元素的函数
2015/03/07 PHP
Zend Framework动作助手Json用法实例分析
2016/03/05 PHP
php基于websocket搭建简易聊天室实践
2016/10/24 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
php-7.3.6 编译安装过程
2020/02/11 PHP
两个比较有用的Javascript工具函数代码
2010/02/17 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
2015/08/21 Javascript
jquery制作图片时钟特效
2020/03/30 Javascript
jQuery EasyUI常用数据验证汇总
2016/09/18 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
2016/10/17 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
2017/02/18 Javascript
微信小程序中input标签详解及简单实例
2017/05/18 Javascript
js原生日历的实例(推荐)
2017/10/31 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
2018/05/07 Javascript
JS实现的自定义map方法示例
2019/05/17 Javascript
[01:01:35]Optic vs paiN 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python3实现的腾讯微博自动发帖小工具
2013/11/11 Python
Python获取任意xml节点值的方法
2015/05/05 Python
Python中序列的修改、散列与切片详解
2017/08/27 Python
Python使用 Beanstalkd 做异步任务处理的方法
2018/04/24 Python
Python3爬虫mitmproxy的安装步骤
2020/07/29 Python
python 中关于pycharm选择运行环境的问题
2020/10/31 Python
pycharm中选中一个单词替换所有重复单词的实现方法
2020/11/17 Python
基于python的opencv图像处理实现对斑马线的检测示例
2020/11/29 Python
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
党员学习十八大感想
2014/01/17 职场文书
大学生职业生涯规划书模板
2014/01/18 职场文书
银行主办会计岗位职责
2014/08/13 职场文书
讲文明知礼仪演讲稿
2014/09/13 职场文书
杜甫草堂导游词
2015/02/03 职场文书
Python进程池与进程锁之语法学习
2022/04/11 Python