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

网络编程 2024/11/16 佚名

3 1 2

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

新闻详细页面

我们在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>

修改新闻首页路由

我们在/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.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>

我们使用了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的动态路由和参数校验操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

Nuxt,动态路由,参数校验

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“Nuxt的动态路由和参数校验操作”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

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

原生JavaScript实现五子棋游戏

jQuery实现移动端扭蛋机抽奖

评论“Nuxt的动态路由和参数校验操作”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

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

原生JavaScript实现五子棋游戏

jQuery实现移动端扭蛋机抽奖

评论“Nuxt的动态路由和参数校验操作”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存