Где найти пример работы nuxt auth?

Question

[Сергей Бурдужа]

Добрый день.
Не могу понять как работает nuxt auth.

На оф сайте есть видео инструкция https://auth.nuxtjs.org/, только автор рассказывает далеко не все.
Я не могу понять принцип работы.

submitForm() {
      this.loading = true;
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          try {
            const data = {
              login: this.ruleForm.login,
              password: this.ruleForm.password
            };
            const response = await this.$auth.loginWith("local", data);
            console.log(response, "response");
            this.loading = false;

            // this.$message.success("User was logged in");
            // this.$router.push("/admin");
          } catch (error) {
            console.log(error, "error from login vue");
            this.loading = false;
          }
        } else {
          this.loading = false;
          console.log("error submit!!");
          return false;
        }
      });
    }

proxy: { "/api/": process.env.BASE_URL },
  auth: {
    strategies: {
      local: {
        token: {
          property: "token",
          global: true
          // required: true,
          // type: 'Bearer'
        },
        user: {
          property: "user"
          // autoFetch: true
        },
        endpoints: {
          login: { url: "/api/auth/login", method: "post" },
          logout: { url: "/api/auth/logout", method: "post" },
          user: { url: "/api/auth/user", method: "get" }
        }
      }
    }
  },

Когда я вызываю метод this.$auth.loginWith("local", data), на стороне сервера я должен принимать данные и формы, записать в базу данных и обратно возвращать токен?
Или мне нужно самому создать этот экшен для этих действий.

Почему нельзя было показать весь процесс? Не все такие умные.

Answer 1

[Сергей Бурдужа]

Я закончил с авторизацией. Работает и с local storage и с cookie. "

nuxt.config.js

axios: { proxy: true },
  proxy: { "/api/": process.env.BASE_URL + "/" },
  auth: {
    strategies: {
      local: {
        token: {
          property: "token",
          global: true
          // required: true,
          // type: 'Bearer'
        },
        user: {
          property: "user",
          autoFetch: false
        },
        endpoints: {
          login: { url: "/api/login", method: "post" },
          logout: { url: "/api/auth/logout", method: "post" },
          user: { url: "/api/auth/user", method: "get" }
        }
      }
    }
  },

auth routes

const { Router } = require("express");
const router = Router();
const {
  login,
  register,
  user,
  logout
} = require("./../controllers/auth.controller");

router.post("/api/login", login);
router.post("/api/auth/register", register);
router.get("/api/auth/user", user);
router.post("/api/auth/logout", logout);

module.exports = router;

auth controllers

const User = require("./../models").User;
const Sequelize = require("sequelize");
const Op = Sequelize.Op;
const bcrypt = require("bcrypt-nodejs");
const jwt = require("jsonwebtoken");

module.exports.login = async (req, res) => {
  const login = req.body.login;
  const password = req.body.password;

  try {
    const candidate = await User.findOne({
      where: {
        login: {
          [Op.eq]: login
        }
      }
    });
    if (candidate) {
      if (bcrypt.compareSync(password, candidate.password)) {
        const token = jwt.sign(
          {
            user: candidate.login,
            userId: candidate.id
          },
          process.env.JWT,
          { expiresIn: "2h" }
        );

        res
          .status(200)
          .json({ status: 1, message: "You are logged in", token });
      } else {
        res.status(200).json({ status: 0, message: "User not found" });
      }
    } else {
      res.status(200).json({ status: 0, message: "User not found" });
    }
  } catch (error) {
    throw error;
    return res.status(500).json(error);
  }
};

module.exports.register = async (req, res) => {
  const { login, password } = req.body.data;
  try {
    const candidate = await User.findOne({
      where: {
        login: {
          [Op.eq]: login
        }
      }
    });
    if (candidate) {
      res.status(200).json({ status: 0, message: "User exists" });
    } else {
      const salt = bcrypt.genSaltSync(10);
      await User.create({
        login: login,
        password: bcrypt.hashSync(password, salt)
      });
      res.status(200).json({ status: 1, message: "User was created" });
    }
  } catch (error) {
    throw error;
    return res.status(500).json(error);
  }
};

module.exports.user = async (req, res) => {
  const token = req.headers["authorization"];
  const newToken = token.replace("Bearer ", "");
  if (token) {
    jwt.verify(newToken, process.env.JWT, (error, decode) => {
      if (error) {
        res.status(403).json({ status: 0, message: "invalid token", error });
      } else {
        res.status(200).json({ status: 1, user: decode.user });
      }
    });
  } else {
    res.status(500).json({ status: 0, message: "Please, send a token" });
  }
};

module.exports.logout = (req, res) => {
  res.status(200).json({ status: 1, message: "You are logged in", token: "" });
};

Logout

methods: {
    logout() {
      this.$auth.logout();
    }
  }

Login

submitForm() {
      this.loading = true;
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          try {
            const data = {
              login: this.ruleForm.login,
              password: this.ruleForm.password
            };
            const response = await this.$auth.loginWith("local", {
              data: this.ruleForm
            });

            this.loading = false;

            if (response.data.status === 1) {
              this.$message.success(response.data.message);
              window.location.href = process.env.baseUrl;
            } else {
              this.$message.warning(response.data.message);
            }
          } catch (error) {
            this.loading = false;
          }
        } else {
          this.loading = false;
          console.log("error submit!!");
          return false;
        }
      });
    }

Answer 2

[Вадим]

Мне этот видос помог
https://www.youtube.com/watch?v=zzUpO8tXoaw

Comments

[Сергей Бурдужа]

Так я тоже его смотрю.
Только я хочу реализовать добавление несколько пользователей в базе данных.
А в этом видосе показан только фронтенд.
Для них бэкенд вообще темный лес.
Я по-тихоечку решаю задачу.
Закончу, потом выставлю решение.

[Вадим]

Сергей Бурдужа, у меня всё это реализовано. Правда делал это для домашнего проекта, так что тяп ляп. Если интересно кину на гитхаб.

[Сергей Бурдужа]

Вадим, Если не трудно?

[Вадим]

https://github.com/mrvadim/n-store