Nuxt 의 동적 경로 와 파라미터 검사 작업
뉴스 상세 페이지
뉴스 폴 더 아래 에 새로 만 들 었 습 니 다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 에서 수정 하여 뉴스-1 과 뉴스-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 도 우리 에 게 검증 방법 vaidate()를 준비 해 주 었 습 니 다./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>
<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>
우 리 는 vaidate 방법 을 사용 하여 params 를 전달 한 다음 정규 로 검 사 를 했 습 니 다.정규 로 true 가 정상적으로 페이지 에 들 어 갔 으 면 false 로 돌아 가 404 페이지 에 들 어 갔 을 것 입 니 다.
Nuxt 사용자 인증 로그 인 실현
머리말
블 로그 의 프론트 데스크 재 구성 이 끝 났 습 니 다.그 다음은 백 스테이지 부분 입 니 다.백 스테이지 의 주요 기능 은 바로 글 을 발표,삭제,수정 하 는 것 입 니 다.아무 나 마음대로 들 어 갈 수 있 는 것 이 아 닙 니 다.vue 프로젝트 에서 저 는 Vue Router 의 전역 전위 에서 현재 사용자 가 쿠키 가 있 는 지 판단 하여 백 스테이지 에 들 어 갈 권리 가 있 는 지 판단 합 니 다.한편,Nuxt 가 Vue 프로젝트 에 비해 가장 큰 차이 점 중 하 나 는 Vue Router 를 사용 하지 않 고 디 렉 터 리 를 사용 하여 페이지 경 로 를 진행 하 는 것 이다.자 연 스 럽 게 우 리 는 전체 국면 에서 이 기 회 를 지 키 는 것 을 잃 었 다.물론 Nuxt 는 해결 할 수 있 지만 그 전에 우 리 는 먼저 감 권 의 원 리 를 알 아야 한다.
쿠키 와 세 션
전단 의 학우 들 이 이 두 이름 에 대해 이미 들 은 바 가 있 지만 반드시 상세 한 이 해 를 가지 고 있 는 것 은 아니 라 고 믿는다.알다 시 피 우리 가 웹 페이지 를 방문 할 때 사용 하 는 HTTP 프로 토 콜 은 무상 태 입 니 다.즉,모든 요청 은 서버 에 있어 서 똑 같 습 니 다.이 요청 은 당신 이 보 낸 것 임 을 기억 할 수 없습니다.그래서 여 기 는 쿠키 를 사용 해 야 합 니 다.
Cookie 는 서버 에서 설정 한 것 으로 브 라 우 저 에서 하 드 디스크 에 저 장 된 데이터 입 니 다.예 를 들 어 사용자 데 이 터 는 서버 에 요청 할 때마다 이 데 이 터 를 가지 고 다 닙 니 다.서버 에서 보면 누가 보 낸 건 지 알 수 있 습 니 다.이 과정 을 Session(세 션)이 라 고 합 니 다.
Session 초기 란 하나의 개념 으로 사이트 와 상호작용 을 하 는 주기 입 니 다.이 주기 에 서버 는 브 라 우 저 에 저 장 된 쿠키 를 통 해 당신 이 누구 인지 판별 합 니 다.그러나 로 컬 에 저 장 된 쿠키 는 안전 하지 않 아 누구나 보고 변경 할 수 있 기 때문에 현재 더욱 유행 하 는 방법 은 쿠키 에 저 장 된 유일한 사용자 식별 자(SessionID)만 을 통 해 사용 자 를 식별 하고 사용자 정 보 는 서버 에 저장 하 는 것 이다.그래서 세 션 이라는 개념 은 Cookie 의 상급자 라 고 할 수 있 고 동급 이 라 고 할 수 있 습 니 다.
Nuxt 감 권
Nuxt 감 권 의 기본 원 리 를 설명 한 결과 감 권 은 사용자 가 이 페이지 에 들 어 올 때 로 컬 Cookie 를 판단 하고 설 치 된 Cookie 가 존재 한 다 는 것 을 알 수 있 습 니 다.그러면 이 사용자 가 로그 인 했 음 을 설명 하고 보 냅 니 다.아무것도 없어 요?안 돼.로그 인 해 주면 로그 인 페이지 로 넘 어가.이 절 차 를 알 고 구체 적 인 일 을 시작 했다.
서버 쪽
서버 쪽 에 서 는 koa-session 을 사용 하여 koa-session 을 설치 합 니 다.
npm install koa-session
npm install koa-session-mongoose/mongodb 로 세 션 정 보 를 저장 합 니 다.
그리고 입구 파일 에서 이렇게 사용 합 니 다.
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
)
);
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)
})
})
})
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;
},
}middleware 폴 더 열기(Nuxt 항목 자체 테이프),auth.js 파일 새로 만 들 기
// auth.js
export default function ({ store, redirect }) {
if (!store.state.authUser) {
return redirect('/welcome')
}
}
export default {
middleware: 'auth',
};이렇게 해서 인증 을 완 료 했 습 니 다.로그 인 한 적 이 없 는 사용 자 는 백 엔 드 를 방문 할 때 로그 인 페이지 로 재 설정 되 었 습 니 다.바로 Cookie 를 간단하게 사 용 했 습 니 다.프로젝트 의 특성 에 따라 session 의 많은 기능 이 사용 되 지 않 았 습 니 다.예 를 들 어 서버 에 사용자 정 보 를 저장 하 는 것 입 니 다.주로 다른 사람 이 백 스테이지 에 접근 하 는 것 을 막 는 기능 으로 간단 하 다.
이상 의 Nuxt 의 동적 경로 와 파라미터 검사 작업 은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.여러분 께 참고 가 되 고 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Nuxt 구성 Element-UI 필요에 따라 도입Nuxt가create-nuxt-app을 사용하여 프로젝트를 만들 때 Element-UI를 기본 구성 요소 라이브러리로 선택하면 Nuxt가 Element-UI의 필요에 따라 설정을 도입하지 않고 스스로 설정해야 합니다...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
