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

时间：2021-11-11 03:35:12

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

新闻详细页面

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

/pages/news/_id.vue

?
1
2
3
4
5
6
7
8
<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.

?
1
2
3
4
5
6
7
8
9
10
11
<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>
?
1
2
3
4
5
<script>
export default {
 
}
</script>

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

动态参数校验

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

?
1
2
3
4
5
6
7
8
<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>
?
1
2
3
4
5
6
7
8
<script>
export default {
 validate({params}){
  // Must be a number
  return /^\d+$/.test(params.id)
 }
}
</script>

/pages/news/index.vue

?
1
2
3
4
5
6
7
8
9
10
11
<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>
?
1
2
3
4
5
<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 信息

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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 中

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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 返回登录成功

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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 这两个时期，先来看代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 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 文件

?
1
2
3
4
5
6
// auth.js
export default function ({ store, redirect }) {
 if (!store.state.authUser) {
  return redirect('/welcome')
 }
}

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

?
1
2
3
export default {
  middleware: 'auth',
};

总结

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

以上这篇Nuxt的动态路由和参数校验操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持服务器之家。

原文链接：https://blog.csdn.net/zjsfdx/article/details/82110539

标签：

相关文章