Page Login

12003

Framework login page: loginV4.html
Framework login service: user.js
Framework user table: _user

In this section, we’ll explain how to implement the login flow. First, call the login API login.passwordLogin. After a successful login, use the browser’s cookies and localStorage for authentication.

Login Flow

Call the login API login.passwordLogin.
On success:
- login.passwordLogin automatically writes a cookie to the browser for subsequent page access authentication. The cookie key is ${appId}_authToken, and the value is the authToken.
- Persist the returned authToken, userId, and deviceId to localStorage for authenticating future API calls.

Below is an example implementation of the login logic:

<jh-toast/>
<v-app>
    <v-row class="ma-0 pa-3">
        <v-btn class="elevation-0 mr-2" color="success" small @click="doLogin">登陆</v-btn>
    </v-row>
</v-app>
<script type="module">
new Vue({
    el: '#app',
    template: '#app-template',
    vuetify: new Vuetify(),
    data: {
        userId: 'test',
        password: '123456',
        deviceId: 'test_001',
    },
    methods: {
      async doLogin() {
        window.vtoast.loading("登陆");
        const resultData = (await window.jianghuAxios({
            data: {
                appData: {
                    pageId: 'login',
                    actionId: 'passwordLogin',
                    actionData: {
                        userId: this.userId,
                        password: this.password,
                        deviceId: this.deviceId
                    },
                }
            }
        })).data.appData.resultData;
        const { authToken, userId, deviceId } = resultData;
        localStorage.setItem(`${window.appInfo.authTokenKey}_authToken`, authToken);
        localStorage.setItem(`${window.appInfo.authTokenKey}_userId`, userId);
        localStorage.setItem(`${window.appInfo.authTokenKey}_deviceId`, deviceId);
        window.vtoast.success("登陆");
      },
    }
})
</script>

Using `authToken`

When the user visits a page, the cookie is sent to the server automatically.
When the user calls an API, include the authToken in the request body under data. If you use jianghuAxios to make API requests, it will automatically read the authToken from localStorage and inject it into data.

await window.jianghuAxios({
    data: {
        authToken: 'xxxxx',
        appData: {
            pageId: 'test',
            actionId: 'selectItemList',
            actionData: {},
        }
    }
})

With this, you’ve implemented the login flow and set up authentication using cookies and localStorage, enabling reliable identity verification for both page visits and API calls.

Full Login Example

<jh-toast />
<jh-mask />
<jh-confirm-dialog />
<v-app>
    <v-main>
        <v-row class="align-center" style="height: 100vh">
            <v-col cols="12" align="center">
                <div class="mb-10 text-h7 font-weight-bold success--text">
                    <$ ctx.app.config.appTitle $>
                </div>
                <v-card class="login-form-card pa-8">
                    <v-card-text class="pa-0">
                        <div class="title">登录您的账户</div>
                        <v-form ref="loginForm" lazy-validation>
                            <!-- 表单 [注：登录表单包含密码输入框，chrome密码自动填充的时候会与vuetify的v-input组件样式冲突，使用原生input避免冲突] -->
                            <v-row class="my-0">
                                <v-col cols="12">
                                    <input class="jh-cus-input" v-model="userId" placeholder="用户名" />
                                </v-col>
                                <v-col cols="12">
                                    <div class="password-wrapper">
                                        <input class="jh-cus-input" v-model="password"
                                            :type="isPasswordShown ? 'text' : 'password'" data-type="password"
                                            @keyup.enter.exact="doUiAction('login')" placeholder="密码" />
                                        <v-icon @click="isPasswordShown = !isPasswordShown" small
                                            class="mdi-eye">{{isPasswordShown ? 'mdi-eye-off-outline' :
                                            'mdi-eye-outline'}}</v-icon>
                                    </div>
                                </v-col>
                            </v-row>
                            <!-- 操作按钮 -->
                            <v-row class="my-0 px-3">
                                <v-btn block color="success" @click="doUiAction('login')" small>登录</v-btn>
                            </v-row>
                        </v-form>
                    </v-card-text>
                </v-card>
            </v-col>
        </v-row>
    </v-main>
</v-app>
{% include 'utility/jianghuJs/prepareDeviceIdV4.html' %}
<script type="module">
new Vue({
    el: '#app',
    template: '#app-template',
    vuetify: new Vuetify(),
    data: {
        userId: '',
        password: '',
        deviceId: null,
        isPasswordShown: false,
    },
    async created() {},
    async mounted() {},
    methods: {
        async doUiAction(uiActionId, uiActionData) {
            try {
                switch (uiActionId) {
                    case 'login':
                        await this.prepareLoginData();
                        await this.doLogin();
                        await this.setLocalStorage();
                        await this.redirectToPreLoginURL();
                        break;
                    default:
                        console.error("[doUiAction] uiActionId not found", { uiActionId });
                        break;
                }
            } catch (error) {
                throw error;
            } finally {
                window.jhMask && window.jhMask.hide();
            }
        },
        // ---------- login uiAction >>>>>>>>>> --------
        async prepareLoginData() {
            this.deviceId = window.deviceId;
            this.userId = _.replace(this.userId, /\s+/g, '');;
            this.password = _.toString(this.password);
        },
        async doLogin() {
            try {
                const resultData = (await window.jianghuAxios({
                    data: {
                        appData: {
                            pageId: 'login',
                            actionId: 'passwordLogin',
                            actionData: {
                                userId: this.userId,
                                password: this.password,
                                deviceId: this.deviceId
                            },
                        }
                    }
                })).data.appData.resultData;
                this.loginResult = resultData;
                window.vtoast.success('登录成功');
            } catch (error) {
                const { errorCode, errorReason } = error || {};
                if (errorCode) {
                    window.vtoast.fail(errorReason);
                    throw new Error("登录失败", { errorCode, errorReason });
                } else {
                    window.vtoast.fail('登录失败');
                    throw new Error("登录失败");
                }
            }
        },
        async setLocalStorage() {
            localStorage.setItem(`${window.appInfo.authTokenKey}_authToken`, this.loginResult.authToken);
            localStorage.setItem(`${window.appInfo.authTokenKey}_userId`, this.loginResult.userId);
            localStorage.setItem(`${window.appInfo.authTokenKey}_deviceId`, this.deviceId);
        },
        async redirectToPreLoginURL() {
            // 重定向到帮助页
            // window.location.href =`/${window.appInfo.appId}/page/help`;
        }
        // ---------- <<<<<<<<<<< login uiAction  --------
    }
})
</script>
<style scoped>
    .login-form-card {
        width: 400px;
    }
    /* ---------- 输入框 >>>>>>>>>> -------- */
    .jh-cus-input {
        border: 1px solid rgba(0, 0, 0, .06);
        width: 100%;
        height: 32px;
        border-radius: 6px;
        padding: 0 12px;
        color: #5E6278 !important;
        outline: none;
        font-size: 13px !important;
    }
    .jh-cus-input:focus,
    .jh-cus-input:focus-visible,
    input:focus-visible {
        border: thin solid #4caf50 !important;
    }
    /* ---------- <<<<<<<<<<< 输入框 -------- */
    /* ---------- 密码框 >>>>>>>>>> -------- */
    .password-wrapper {
        position: relative;
    }
    .password-wrapper .mdi-eye {
        position: absolute;
        right: 8px;
        top: 8px;
    }
    /* ---------- <<<<<<<<<<< 密码框 -------- */
</style>

* Framework login page: [loginV4.html](https://github.com/jianghujs/jianghu/tree/main/app/view/page/loginV4.html)
* Framework login service: [user.js](https://github.com/jianghujs/jianghu/blob/main/app/service/user.js#L56)
* Framework user table: [\_user](/__appId__/page/article/12324#_user)

In this section, we’ll explain how to implement the login flow. First, call the login API `login.passwordLogin`. After a successful login, use the browser’s cookies and `localStorage` for authentication.

## Login Flow

1. Call the login API `login.passwordLogin`.
2. On success:

* `login.passwordLogin` automatically writes a cookie to the browser for subsequent page access authentication. The cookie key is `${appId}_authToken`, and the value is the `authToken`.
   * Persist the returned `authToken`, `userId`, and `deviceId` to `localStorage` for authenticating future API calls.

Below is an example implementation of the login logic:

```javascript
<jh-toast/>
<v-app>
    <v-row class="ma-0 pa-3">
        <v-btn class="elevation-0 mr-2" color="success" small @click="doLogin">登陆</v-btn>
    </v-row>
</v-app>
<script type="module">
new Vue({
    el: '#app',
    template: '#app-template',
    vuetify: new Vuetify(),
    data: {
        userId: 'test',
        password: '123456',
        deviceId: 'test_001',
    },
    methods: {
      async doLogin() {
        window.vtoast.loading("登陆");
        const resultData = (await window.jianghuAxios({
            data: {
                appData: {
                    pageId: 'login',
                    actionId: 'passwordLogin',
                    actionData: {
                        userId: this.userId,
                        password: this.password,
                        deviceId: this.deviceId
                    },
                }
            }
        })).data.appData.resultData;
        const { authToken, userId, deviceId } = resultData;
        localStorage.setItem(`${window.appInfo.authTokenKey}_authToken`, authToken);
        localStorage.setItem(`${window.appInfo.authTokenKey}_userId`, userId);
        localStorage.setItem(`${window.appInfo.authTokenKey}_deviceId`, deviceId);
        window.vtoast.success("登陆");
      },
    }
})
</script>
```

## Using `authToken`

* When the user visits a **page**, the cookie is sent to the server automatically.
* When the user calls an **API**, include the `authToken` in the request body under `data`. If you use `jianghuAxios` to make API requests, it will automatically read the `authToken` from `localStorage` and inject it into `data`.

```javascript
await window.jianghuAxios({
    data: {
		authToken: 'xxxxx',
        appData: {
			pageId: 'test',
			actionId: 'selectItemList',
			actionData: {},
        }
    }
})
```

With this, you’ve implemented the login flow and set up authentication using cookies and `localStorage`, enabling reliable identity verification for both page visits and API calls.

## Full Login Example

```html
<jh-toast />
<jh-mask />
<jh-confirm-dialog />
<v-app>
    <v-main>
        <v-row class="align-center" style="height: 100vh">
            <v-col cols="12" align="center">
                <div class="mb-10 text-h7 font-weight-bold success--text">
                    <$ ctx.app.config.appTitle $>
                </div>
                <v-card class="login-form-card pa-8">
                    <v-card-text class="pa-0">
                        <div class="title">登录您的账户</div>
                        <v-form ref="loginForm" lazy-validation>
                            
                            <v-row class="my-0">
                                <v-col cols="12">
                                    <input class="jh-cus-input" v-model="userId" placeholder="用户名" />
                                </v-col>
                                <v-col cols="12">
                                    <div class="password-wrapper">
                                        <input class="jh-cus-input" v-model="password"
                                            :type="isPasswordShown ? 'text' : 'password'" data-type="password"
                                            @keyup.enter.exact="doUiAction('login')" placeholder="密码" />
                                        <v-icon @click="isPasswordShown = !isPasswordShown" small
                                            class="mdi-eye">{{isPasswordShown ? 'mdi-eye-off-outline' :
                                            'mdi-eye-outline'}}</v-icon>
                                    </div>
                                </v-col>
                            </v-row>
                            
                            <v-row class="my-0 px-3">
                                <v-btn block color="success" @click="doUiAction('login')" small>登录</v-btn>
                            </v-row>
                        </v-form>
                    </v-card-text>
                </v-card>
            </v-col>
        </v-row>
    </v-main>
</v-app>
{% include 'utility/jianghuJs/prepareDeviceIdV4.html' %}
<script type="module">
new Vue({
    el: '#app',
    template: '#app-template',
    vuetify: new Vuetify(),
    data: {
        userId: '',
        password: '',
		deviceId: null,
        isPasswordShown: false,
    },
    async created() {},
    async mounted() {},
    methods: {
        async doUiAction(uiActionId, uiActionData) {
            try {
                switch (uiActionId) {
                    case 'login':
                        await this.prepareLoginData();
                        await this.doLogin();
                        await this.setLocalStorage();
                        await this.redirectToPreLoginURL();
                        break;
                    default:
                        console.error("[doUiAction] uiActionId not found", { uiActionId });
                        break;
                }
            } catch (error) {
                throw error;
            } finally {
                window.jhMask && window.jhMask.hide();
            }
        },
        // ---------- login uiAction >>>>>>>>>> --------
        async prepareLoginData() {
            this.deviceId = window.deviceId;
            this.userId = _.replace(this.userId, /\s+/g, '');;
            this.password = _.toString(this.password);
        },
        async doLogin() {
            try {
                const resultData = (await window.jianghuAxios({
                    data: {
                        appData: {
                            pageId: 'login',
                            actionId: 'passwordLogin',
                            actionData: {
                                userId: this.userId,
                                password: this.password,
                                deviceId: this.deviceId
                            },
                        }
                    }
                })).data.appData.resultData;
                this.loginResult = resultData;

.jh-cus-input:focus,
    .jh-cus-input:focus-visible,
    input:focus-visible {
        border: thin solid #4caf50 !important;
    }
    /* ---------- <<<<<<<<<<< 输入框 -------- */
    /* ---------- 密码框 >>>>>>>>>> -------- */
    .password-wrapper {
        position: relative;
    }
    .password-wrapper .mdi-eye {
        position: absolute;
        right: 8px;
        top: 8px;
    }
    /* ---------- <<<<<<<<<<< 密码框 -------- */
</style>
```

Page Login

Login Flow

Using authToken

Full Login Example

Using `authToken`