\u062f\u0631 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634\u060c \u0646\u062d\u0648\u0647\u200c\u06cc \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a (Authentication)<\/strong> \u062f\u0631 \u06cc\u06a9 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 Nuxt.js<\/strong> \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u0627\u0698\u0648\u0644 Auth<\/strong> \u0631\u0627 \u06cc\u0627\u062f \u0645\u06cc\u200c\u06af\u06cc\u0631\u06cc\u062f.<\/p>\n \u0628\u0631\u0627\u06cc \u0627\u0647\u062f\u0627\u0641 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634\u060c \u0627\u0632 JWT (JSON Web Token)<\/strong> \u0628\u0631\u0627\u06cc \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n \u0633\u0648\u0631\u0633\u200c\u06a9\u062f \u0627\u06cc\u0646 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u062f\u0631 GitHub<\/strong> \u0645\u0648\u062c\u0648\u062f \u0627\u0633\u062a.<\/p>\n \u0647\u0634\u062f\u0627\u0631:<\/strong> \u0646\u0635\u0628 Node.js<\/strong> \u0631\u0648\u06cc \u0633\u06cc\u0633\u062a\u0645 \u0645\u062d\u0644\u06cc<\/p>\n<\/li>\n \u0646\u0635\u0628 Git<\/strong> (\u0627\u062e\u062a\u06cc\u0627\u0631\u06cc\u060c \u0628\u0631\u0627\u06cc Clone \u06a9\u0631\u062f\u0646 API)<\/p>\n<\/li>\n \u0622\u0634\u0646\u0627\u06cc\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0628\u0627 Vue.js<\/strong> \u0648 Nuxt.js<\/strong><\/p>\n<\/li>\n<\/ul>\n \u0646\u0633\u062e\u0647\u200c\u0647\u0627\u06cc \u062a\u0633\u062a\u200c\u0634\u062f\u0647:<\/p>\n Node v13.13.0<\/p>\n<\/li>\n npm v6.14.4<\/p>\n<\/li>\n Vue v2.6.11<\/p>\n<\/li>\n Nuxt v2.12.2<\/p>\n<\/li>\n<\/ul>\n Clone \u06a9\u0631\u062f\u0646 API \u0646\u0645\u0648\u0646\u0647:<\/p>\n \u0627\u06af\u0631 \u0628\u0627 \u062f\u0627\u0648\u0646\u200c\u06af\u0631\u06cc\u062f Node \u0628\u0647 \u0646\u0633\u062e\u0647 10.20.1<\/p>\n<\/li>\n \u062d\u0630\u0641 \u062a\u063a\u06cc\u06cc\u0631 \u0646\u0633\u062e\u0647 \u0646\u0627\u0645 \u0641\u0627\u06cc\u0644 \u062a\u0648\u0644\u06cc\u062f APP_KEY:<\/p>\n \u0627\u062c\u0631\u0627\u06cc migration\u0647\u0627:<\/p>\n \u0634\u0631\u0648\u0639 API:<\/p>\n API \u0631\u0648\u06cc:<\/p>\n \u0627\u06cc\u062c\u0627\u062f \u067e\u0631\u0648\u0698\u0647 Nuxt \u0628\u0627 vue-cli:<\/p>\n \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0631\u0648\u06cc:<\/p>\n \u0646\u0635\u0628 \u0645\u0627\u0698\u0648\u0644\u200c\u0647\u0627\u06cc Auth \u0648 Axios:<\/p>\n \u0627\u0641\u0632\u0648\u062f\u0646 \u0645\u0627\u0698\u0648\u0644\u200c\u0647\u0627 \u0628\u0647 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a Axios \u0648 Auth:<\/p>\n \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 Bulma CSS \u062f\u0631 \u0633\u0627\u062e\u062a \u0628\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc layout \u067e\u06cc\u0634\u200c\u0641\u0631\u0636:<\/p>\n \u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc (
\u0628\u0631\u062e\u06cc \u0627\u0632 \u067e\u06a9\u06cc\u062c\u200c\u0647\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647\u200c\u0634\u062f\u0647 \u062f\u0627\u0631\u0627\u06cc \u0622\u0633\u06cc\u0628\u200c\u067e\u0630\u06cc\u0631\u06cc\u200c\u0647\u0627\u06cc \u0634\u0646\u0627\u062e\u062a\u0647\u200c\u0634\u062f\u0647 \u0647\u0633\u062a\u0646\u062f. \u062f\u0631 \u0645\u062d\u06cc\u0637 Production\u060c \u0628\u0627\u06cc\u062f \u0627\u06cc\u0646 \u0645\u0634\u06a9\u0644\u0627\u062a \u0628\u0627 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u06cc\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646\u200c\u0647\u0627 \u062d\u0644 \u0634\u0648\u0646\u062f. \u0627\u0645\u0627 \u0628\u0631\u0627\u06cc \u0622\u0645\u0648\u0632\u0634\u060c \u0647\u0645\u06cc\u0646 \u0646\u0633\u062e\u0647 \u06a9\u0627\u0641\u06cc \u0627\u0633\u062a.<\/p>\n
\n\u067e\u06cc\u0634\u200c\u0646\u06cc\u0627\u0632\u0647\u0627<\/h2>\n
\n
\n
\n\u0645\u0631\u062d\u0644\u0647 \u06f1 \u2014 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc API \u0646\u0645\u0648\u0646\u0647<\/h2>\n
git clone<\/span> https:\/\/github.com\/do-community\/jwt-auth-api.git
\ncd<\/span> jwt-auth-api
\nnpm install
\n<\/code><\/div>\n<\/div>\nsqlite3<\/code> \u0645\u0634\u06a9\u0644 \u062f\u0627\u0634\u062a\u06cc\u062f\u060c \u0631\u0648\u0634\u200c\u0647\u0627\u06cc \u0632\u06cc\u0631 \u067e\u06cc\u0634\u0646\u0647\u0627\u062f \u0645\u06cc\u200c\u0634\u0648\u062f:<\/p>\n\n
package-lock.json<\/code> \u0648 \u0646\u0635\u0628 \u062f\u0648\u0628\u0627\u0631\u0647<\/p>\n<\/li>\nsqlite3<\/code> \u062f\u0631 package.json<\/code> \u0628\u0647 \u0646\u0633\u062e\u0647 \u0633\u0627\u0632\u06af\u0627\u0631<\/p>\n<\/li>\n<\/ol>\n.env.example<\/code> \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f:<\/p>\nmv<\/span> .env.example .env<\/span>
\n<\/code><\/div>\n<\/div>\nnpx @adonisjs\/cli@4.0.12 key:generate
\n<\/code><\/div>\n<\/div>\nnpx @adonisjs\/cli@4.0.12 migration:run
\n<\/code><\/div>\n<\/div>\nnpm start
\n<\/code><\/div>\n<\/div>\nhttp:\/\/127.0.0.1:3333\/api<\/span>
\n<\/code><\/div>\n<\/div>\n
\n\u0645\u0631\u062d\u0644\u0647 \u06f2 \u2014 \u0633\u0627\u062e\u062a \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 Nuxt.js<\/h2>\n
npx vue-cli@2.9.6 init nuxt\/starter nuxt-auth
\ncd<\/span> nuxt-auth
\nnpm install
\nnpm run dev
\n<\/code><\/div>\n<\/div>\nhttp:\/\/localhost:3000<\/span>
\n<\/code><\/div>\n<\/div>\n
\n\u0645\u0631\u062d\u0644\u0647 \u06f3 \u2014 \u0646\u0635\u0628 \u0645\u0627\u0698\u0648\u0644\u200c\u0647\u0627\u06cc Nuxt.js<\/h2>\n
npm install @nuxtjs\/auth@4.5.1 @nuxtjs\/axios@5.3.1 --save
\n<\/code><\/div>\n<\/div>\nnuxt.config.js<\/code>:<\/p>\nmodules<\/span>: [
\n'@nuxtjs\/axios'<\/span>,
\n'@nuxtjs\/auth'<\/span>
\n]
\n<\/code><\/div>\n<\/div>\naxios<\/span>: {
\nbaseURL<\/span>: 'http:\/\/127.0.0.1:3333\/api'<\/span>
\n},<\/code><\/code>auth<\/span>: {
\nstrategies<\/span>: {
\nlocal<\/span>: {
\nendpoints<\/span>: {
\nlogin<\/span>: { url<\/span>: ‘login’<\/span>, method<\/span>: ‘post’<\/span>, propertyName<\/span>: ‘data.token’<\/span> },
\nuser<\/span>: { url<\/span>: ‘me’<\/span>, method<\/span>: ‘get’<\/span>, propertyName<\/span>: ‘data’<\/span> },
\nlogout<\/span>: false<\/span>
\n}
\n}
\n}
\n}<\/p>\n<\/div>\n<\/div>\n
\n\u0645\u0631\u062d\u0644\u0647 \u06f4 \u2014 \u0633\u0627\u062e\u062a Navbar<\/h2>\n
nuxt.config.js<\/code>:<\/p>\n<link<\/span><\/span> rel<\/span>=\"stylesheet\"<\/span> href<\/span>=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bulma\/0.7.1\/css\/bulma.min.css\"<\/span>>
\n<\/code><\/div>\n<\/div>\ncomponents\/Navbar.vue<\/code>:<\/p>\n<template<\/span><\/span>>
\n<nav<\/span><\/span> class<\/span>=\"navbar is-light\"<\/span>>
\n<div<\/span><\/span> class<\/span>=\"container\"<\/span>>
\n<div<\/span><\/span> class<\/span>=\"navbar-brand\"<\/span>>
\n<nuxt-link<\/span><\/span> class<\/span>=\"navbar-item\"<\/span> to<\/span>=\"\/\"<\/span>>Nuxt Auth<\/nuxt-link<\/span><\/span>>
\n<\/div<\/span><\/span>>
\n<\/div<\/span><\/span>>
\n<\/nav<\/span><\/span>>
\n<\/template<\/span><\/span>>
\n<\/code><\/div>\n<\/div>\n<template<\/span><\/span>>
\n<div<\/span><\/span>>
\n<Navbar<\/span><\/span>\/>
\n<nuxt<\/span><\/span>\/>
\n<\/div<\/span><\/span>>
\n<\/template<\/span><\/span>><\/code><\/code><script<\/span><\/span>>
\nimport<\/span> Navbar<\/span> from<\/span> ‘~\/components\/Navbar’<\/span><\/p>\n<\/code><\/code>export<\/span> default<\/span> {
\ncomponents<\/span>: { Navbar<\/span> }
\n}
\n<\/script<\/span><\/span>><\/p>\n<\/div>\n<\/div>\npages\/index.vue<\/code>):<\/p>\n<template<\/span><\/span>>
\n<section<\/span><\/span> class<\/span>=\"section\"<\/span>>
\n<div<\/span><\/span> class<\/span>=\"container\"<\/span>>
\n<h1<\/span><\/span> class<\/span>=\"title\"<\/span>>Nuxt Auth<\/h1<\/span><\/span>>
\n<\/div<\/span><\/span>>
\n<\/section<\/span><\/span>>
\n<\/template<\/span><\/span>>