一个基于 ThinkJS 框架的登录功能示例代码

一个基于 ThinkJS 框架的登录功能示例代码:

在路由文件 src/router.js 中添加以下代码:

module.exports = [

  // 显示登录页面

  { method: 'get', path: '/login', controller: 'home', action: 'login' },

  // 处理登录请求

  { method: 'post', path: '/login', controller: 'home', action: 'doLogin' },

  // 显示个人资料页面

  { method: 'get', path: '/profile', controller: 'home', action: 'profile' }

];

在控制器文件 src/controller/home.js 中添加以下代码:

const Base = require('./base.js');

module.exports = class extends Base {

  // 显示登录页面

  async loginAction() {

    return this.display('login');

  }

 // 处理登录请求

  async doLoginAction() {

    const { username, password } = this.post();

  // 在这里进行用户名和密码的验证

    if (username === 'admin' && password === 'password') {

      // 登录成功,记录用户信息到 session

      this.session('user', { username });

      return this.redirect('/profile');

    } else {

      // 登录失败,返回错误提示

      return this.fail('用户名或密码不正确!');

    }

  }


  // 显示个人资料页面

  async profileAction() {

    // 检查用户是否已登录,如果未登录,则重定向到登录页面

    if (!this.session('user')) {

      return this.redirect('/login');

    } else {

      // 显示用户的个人资料页面

      const user = this.session('user');

      return this.success(`欢迎您,${user.username}!`);

    }

  }

};

在视图文件 src/view/home/login.html 中添加以下代码:

<h1>登录页面</h1>

<form method="post" action="/login">

  <label for="username">用户名:</label>

  <input type="text" id="username" name="username"><br>

  <label for="password">密码:</label>

  <input type="password" id="password" name="password"><br>

 <button type="submit">登录</button>

</form>


在控制器文件home.js中,我们定义了三个路由处理程序,分别用于显示登录页面、处理登录请求和显示个人资料页面。在doLoginAction处理程序中,我们进行了用户名和密码的验证,并在验证成功时将用户信息记录到 session 中,表示用户已登录。在profileAction处理程序中,我们检查用户是否已登录,如果已登录,则显示用户的个人资料页面,否则重定向到登录页面。

在视图文件login.html中,我们定义了一个简单的登录表单,它将数据提交到/login路由中,使用 POST 方法。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容