Egg.js creates base classes, configures common pages, background addresses, and logs out

This is the 13th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Redirect the page after a specified time through the META tag of HTML

<meta http-equiv="refresh" content="3; url=http://www.baidu.com"> 
Copy the code

Create a base class

Why create a base class?

The base class was created because we wanted to reuse some common logic, such as what to do with a successful login and what to do with a login failure, which is the root of why we created the base class.

Implementation method

1. Start by creating a base.js file under the controller

2. Define asynchronous functions in a file that need to be reused.

'use strict';

const Controller = require('egg').Controller;

class BaseController extends Controller {
  async success(msg,redirectUrl) {
    await this.ctx.render("admin/public/success",{
      msg,
      redirectUrl
    })
  }
  async error(msg,redirectUrl) {
    await this.ctx.render("admin/public/error",{
      msg,
      redirectUrl
    })
  }
}

module.exports = BaseController;
Copy the code

3. Inheritance needs to be modified where base classes are needed.

const BaseController = require('./base.js');
class LoginController extends BaseController{};
Copy the code

4. Call methods in this asynchronously through this

await this.success("Login successful"."/admin")
Copy the code

Configure common successful failed pages

1. Define successful static pages and error static pages inside the specified folder under View.
2. The meta tag is used to enable the jump after a specified time.
3. Receives incoming parameters through the EJS template.

<%- include .. /public/page_header.html %><meta http-equiv="refresh" content="1. url=<%=redirectUrl%>"> 

 <div class="container" style="width: 480px; margin-top:100px;">

    <div class="row">                 
            <div class="alert alert-success">            	
                <h2><%=msg%></h2>   
            	
            	<br />
            		
            	<p>If you do not make a selection, you will be redirected to the first link address after 3 seconds.</p>            
            
            </div>       
    </div>
</div>

</body>
</html>
Copy the code

Set a background address that can be modified

The reason why you need to configure the background address that can be changed is that you only need to change the address in the configuration file when changing the path, avoiding the tedious modification one by one.

1. Specify the background path in config.default.js.
2. Specifies that the middleware matches the path mentioned above and passes the specified path to the middleware.

  config.adminPath = "aaa";
  config.adminAuth = {
    match: ` /${config.adminPath}`.adminPath: config.adminPath
  }
Copy the code

3. The method of obtaining a specified path in a route

const {
    router,
    controller,
    config
  } = app
router.get(` /${config.adminPath}/manager`, controller.admin.manager.index);
Copy the code

4. Middleware gets adminPath by configuring global variables

ctx.state.adminPath = options.adminPath;
Copy the code

5. The controller obtains the path from this.config

await this.error('Wrong username or password'.` /The ${this.config.adminPath}/login`)
Copy the code

6. Static page directly from the template engine

<li class="list-group-item"> <a href="/<%=adminPath%>/role" target="rightMain">Role management</a></li>
Copy the code

Static pages are available because the middleware we configured in step 4 configured adminPath into a global variable.

Exit the implementation of the login function

1. Define exit asynchronous functions in the controller

In the asynchronous function, the session must be cleared first, because the middleware determines whether the login is realized through the session, and the login page is redirected after the login.

  // Log out
  async loginOut() {
    this.ctx.session.userinfo = null;
    await this.success("Exit successful".` /The ${this.config.adminPath}/login`);
  }
Copy the code

2. Configure the routing

router.get(` /${config.adminPath}/login/loginOut`,controller.admin.login.loginOut)
Copy the code

3. Click the static page configuration at exit

<li><a href="/<%=adminPath%>/login/loginOut">Safety exit</a>
Copy the code