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代码
Dec 15 Javascript
javascript面向对象程序设计(一)
Jan 29 Javascript
jQuery获得子元素个数的方法
Apr 14 Javascript
JavaScript对象学习小结
Sep 02 Javascript
原生JS实现美图瀑布流布局赏析
Sep 07 Javascript
基于javascript实现简单的抽奖系统
Apr 15 Javascript
js编写一个简单的产品放大效果代码
Jun 27 Javascript
简单实现js页面切换功能
Jan 10 Javascript
jquery+ajax+text文本框实现智能提示完整实例
Jul 09 Javascript
详解vuex 中的 state 在组件中如何监听
May 23 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
Aug 30 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
Sep 06 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
PHP写杨辉三角实例代码
2011/07/17 PHP
PHP设计模式之结构模式的深入解析
2013/06/13 PHP
PHP中$this和$that指针使用实例
2015/01/06 PHP
PHP实现动态获取函数参数的方法示例
2018/04/02 PHP
破解Session cookie的方法
2006/07/28 Javascript
JavaScript 变量命名规则
2009/09/23 Javascript
jquery的Tooltip插件 qtip使用详细说明
2010/09/08 Javascript
javascript内存管理详细解析
2013/11/11 Javascript
JavaScript执行顺序详细介绍
2013/12/04 Javascript
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
jquery获取多个checkbox的值异步提交给php
2015/07/07 Javascript
Javascript 计算字符串在localStorage中所占字节数
2015/10/21 Javascript
jQuery删除节点用法示例(remove方法)
2016/09/08 Javascript
vue中渐进过渡效果实现
2016/10/27 Javascript
js自定义QQ菜单效果
2017/01/10 Javascript
微信小程序中的onLoad详解及简单实例
2017/04/05 Javascript
vue中v-show和v-if的异同及v-show用法
2019/06/06 Javascript
ZK中使用JS读取客户端txt文件内容问题
2019/11/07 Javascript
Openlayers实现点闪烁扩散效果
2020/09/24 Javascript
python中常用的九种预处理方法分享
2016/09/11 Python
win10下Python3.6安装、配置以及pip安装包教程
2017/10/01 Python
Python 判断 有向图 是否有环的实例讲解
2018/02/01 Python
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
Css3新特性应用之形状总结
2016/12/08 HTML / CSS
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
意大利网上书店:LaFeltrinelli
2020/06/12 全球购物
Java中有几种方法可以实现一个线程?用什么关键字修饰同步方法?stop()和suspend()方法为何不推荐使用?
2015/08/04 面试题
活动策划求职信模板
2014/04/21 职场文书
2014年廉洁自律承诺书
2014/05/26 职场文书
学校献爱心活动总结
2014/07/08 职场文书
党员国庆节演讲稿范文2014
2014/09/21 职场文书
党员个人对照检查材料
2014/10/01 职场文书
新郎新娘答谢词
2015/01/04 职场文书
邀请函模板
2015/02/02 职场文书
如何用JavaScript实现一个数组惰性求值库
2021/05/05 Javascript