If you think we wrote well, remember to like + follow + comment three times, encourage us to write a better tutorial 💪

If you want to create a small program in support of wechat login enterprise user system, you can learn another article: Taro community small program development large actual fight (nine) : use Authing to create an enterprise user system with wechat login

In previous mini e-commerce applications, our website was missing a key component: a user authentication system, including login, registration, and permission management. While it is possible to implement these functions by hand, for a lean team, it is wise to choose a reliable Authentication service (IDaaS) that not only provides comprehensive and rich authentication and user authentication features, but also ensures best security practices and excellent scalability. In this tutorial, we will walk you through the quick integration of Authing user authentication modules into mini e-commerce applications completed earlier in this series, providing a consistent, smooth, and secure identity authentication experience.

  • From Zero to Deployment: Implementing Mini Full Stack E-commerce Applications with Vue and Express (PART 1)
  • From Zero to Deployment: Implementing Mini Full Stack E-commerce Applications with Vue and Express (PART 2)
  • From Zero to Deployment: Implementing Mini Full Stack E-commerce Applications with Vue and Express (Part 3)
  • From Zero to Deployment: Implementing Mini Full Stack E-commerce Applications with Vue and Express (4)
  • From Zero to Deployment: Implementing Mini Full Stack E-commerce Applications with Vue and Express (5)
  • From Zero to Deployment: Implementing Mini Full Stack E-commerce Applications with Vue and Express (6)
  • From Zero to Deployment: Implementing Mini Full Stack E-commerce Applications with Vue and Express (7)
  • From Zero to Deployment: Implementing Mini Full Stack E-commerce Applications with Vue and Express (8)
  • From Zero to Deployment: Implementing Mini Full Stack E-commerce Applications with Vue and Express (9)

First of all, let’s take a look at the effect of overall user system access:

Add user interfaces and routes

With that in mind, we’ve prepared a refactored mini-e-commerce code for you. You can Clone the code and follow the tutorial to supplement the integration of user systems:

git clone -b auth-start https://github.com/tuture-dev/vue-online-shop-frontend.git
# Or download the repository on Gitee
git clone -b auth-start https://gitee.com/tuture/vue-online-shop-frontend.git
Copy the code

After the code is downloaded, create the User directory in the Client/SRC/Pages directory, where we will implement all of the user system-specific pages later.

Note that this tutorial uses Vue 2.x, but the core of this tutorial is to integrate users through Authing and we don’t use much knowledge of Vue.

Achieve user system related pages

First, we create the index. vue user home page component under the user page directory as follows:

<template> <div> <div class="container"> <div class="container"> <h1 class="user-title"> <router-link to="/" Tag ="div"> </router-link> </h1> <router-view /> </div> </div> </template> <style>. User-title :hover {cursor:  pointer; } .container { margin-top: 40px; } </style>Copy the code

Then create the login. vue Login component as follows:

<template> <div id="login-form"> User login </div> </template> <script> export default {}; </script>Copy the code

Then create the setting. vue Setting component as follows:

<template>
  <div>settings</div>
</template>

<script>
export default {
  data() {
    return {
      model: { manufacturer: { name: "", _id: "" } }
    };
  },
  mounted() {}
};
</script>
Copy the code

Configuring central Routing

Finally is integrated in the routing defined above the user’s system related page, modify the client/SRC/router/index. The js code is as follows:

// ...
import UserIndex from "@/pages/user/Index";
import Login from "@/pages/user/Login";
import Setting from "@/pages/user/Setting";

Vue.use(Router);

const router = new Router({
  routes: [{path: "/".name: "Home".component: Home
    },
    {
      path: "/admin".name: "Admin".component: Index,
      children: [{path: "new".name: "New".component: New
        },
        {
          path: "".name: "Products".component: Products
        },
        {
          path: "edit/:id".name: "Edit".component: Edit
        },
        {
          path: "manufacturers".name: "Manufacturers".component: Manufacturers
        },
        {
          path: "manufacturers/new".name: "NewManufacturers".component: NewManufacturers
        },
        {
          path: "manufacturers/edit/:id".name: "EditManufacturers".component: EditManufacturers
        }
      ]
    },
    {
      path: "/cart".name: "Cart".component: Cart
    },
    {
      path: "/detail/:id".name: "Detail".component: Detail
    },
    {
      path: "/user".name: "User".component: UserIndex,
      children: [{path: "login".name: "Login".component: Login
        },
        {
          path: "settings".name: "Settings".component: Setting
        }
      ]
    }
  ]
});

export default router;
Copy the code

To get the project running, click login or Register in the upper right corner and you should successfully jump to the login page (although it is still rudimentary) :

OK, let’s implement each page in detail

Access the user system using Authing

In this step, we will formally access the user system using Authing. Authing is the leading identity cloud in China. It allows us to easily integrate identity related logic, and its free usage is quite abundant for individual developers.

First, let’s visit the official website of Authing and click the login button in the upper right corner, as shown below:

Once in the console, let’s create a new user pool (as the name implies, to manage and store a set of user data and information), as shown below:

When creating the user pool, enter the desired user pool name and exclusive domain name, select The type Web, and click to create our first user pool. Click the “Basic Configuration” bookmark to view some key information about the user pool you just created, especially the user pool ID, as shown below:

Caution In subsequent application development, replace all user pool ids (userpoolIDS) with the real ids of your own accounts.

Vuex Mutations and Store are configured

Since our application uses Vuex to solve the state management problem, we first need to define authentication related Mutation. Here we define two new mutations:

  • SET_USER: Sets user identity data
  • LOGOUT: Log out

In client/SRC/store/mutation – types. Adding the above three js mutation constants, the code is as follows:

export const ALL_PRODUCTS = "ALL_PRODUCTS";
export const ALL_PRODUCTS_SUCCESS = "ALL_PRODUCTS_SUCCESS";

export const PRODUCT_BY_ID = "PRODUCT_BY_ID";
export const PRODUCT_BY_ID_SUCCESS = "PRODUCT_BY_ID_SUCCESS";

export const ADD_PRODUCT = "ADD_PRODUCT";
export const ADD_PRODUCT_SUCCESS = "ADD_PRODUCT_SUCCESS";

export const UPDATE_PRODUCT = "UPDATE_PRODUCT";
export const UPDATE_PRODUCT_SUCCESS = "UPDATE_PRODUCT_SUCCESS";

export const REMOVE_PRODUCT = "REMOVE_PRODUCT";
export const REMOVE_PRODUCT_SUCCESS = "REMOVE_PRODUCT_SUCCESS";

export const ADD_TO_CART = "ADD_TO_CART";
export const REMOVE_FROM_CART = "REMOVE_FROM_CART";

export const ALL_MANUFACTURERS = "ALL_MANUFACTURER";
export const ALL_MANUFACTURERS_SUCCESS = "ALL_MANUFACTURER_S";

export const MANUFACTURER_BY_ID = "MANUFACTURER_BY_ID";
export const MANUFACTURER_BY_ID_SUCCESS = "MANUFACTURER_BY_ID_SUCCESS";

export const ADD_MANUFACTURER = "ADD_MANUFACTURER";
export const ADD_MANUFACTURER_SUCCESS = "ADD_MANUFACTURER_SUCCESS";

export const UPDATE_MANUFACTURER = "UPDATE_MANUFACTURER";
export const UPDATE_MANUFACTURER_SUCCESS = "UPDATE_MANUFACTURER_SUCCESS";

export const REMOVE_MANUFACTURER = "REMOVE_MANUFACTURER";
export const REMOVE_MANUFACTURER_SUCCESS = "REMOVE_MANUFACTURER_SUCCESS";

export const SET_USER = "SET_USER";
export const UPDATE_USER = "UPDATE_USER";
export const LOGOUT = "LOGOUT";
Copy the code

Then we in the client/SRC/store/mutations in js Mutation, relative to the implementation defined above the user code is as follows:

// ...
  UPDATE_MANUFACTURER_SUCCESS,
  REMOVE_MANUFACTURER,
  REMOVE_MANUFACTURER_SUCCESS,
  SET_USER,
  UPDATE_USER,
  LOGOUT
} from "./mutation-types";
import { Message } from "element-ui";

export constuserMutations = { [SET_USER](state, payload) { state.user = payload; }, [LOGOUT](state) { state.user = {}; }};export const productMutations = {
  [ALL_PRODUCTS](state) {
    // ...
    state.showLoader = false;

    const { productId } = payload;
    state.products = state.products.filter(
      product= >product._id ! == productId ); }, [UPDATE_PRODUCT](state) { state.showLoader =true;
  // ...

    const { product: newProduct } = payload;
    state.product = newProduct;
    state.products = state.products.map(product= > {
      if (product._id === newProduct._id) {
        return newProduct;
      }
      // ...
    const { product } = payload;
    state.cart.push(product);
    Message({
      message: "Congratulations, added to shopping cart!".type: "success"
    });
  },
  [REMOVE_FROM_CART](state, payload) {
    const { productId } = payload;
    state.cart = state.cart.filter(product= >product._id ! == productId); Message({message: "Congratulations, you successfully removed the shopping cart!".type: "success"}); }};export const manufacturerMutations = {
  // ...
    state.showLoader = false;

    const { manufacturerId } = payload;
    state.manufacturers = state.manufacturers.filter(
      manufacturer= >manufacturer._id ! == manufacturerId ); }, [UPDATE_MANUFACTURER](state) { state.showLoader =true;
  // ...
    const{ manufacturer } = payload; state.manufacturers = state.manufacturers.concat(manufacturer); }};Copy the code

Our last Vuex Store integration of corresponding state and Mutation, modify the client/SRC/Store/index. The js, HTML code is as follows:

// ...
import { productGetters, manufacturerGetters } from "./getters";
import {
  productMutations,
  cartMutations,
  manufacturerMutations,
  userMutations
} from "./mutations";
import { productActions, manufacturerActions } from "./actions";

Vue.use(Vuex);

export default new Vuex.Store({
  strict: true.state: {
    // ...
    // userInfo
    user: {}
  },
  mutations: {... productMutations, ... cartMutations, ... manufacturerMutations, ... userMutations },// ...
});
Copy the code

Integrate user logic in the root component App

Let’s open the root component client/ SRC/app.vue and add a Mounted method to retrieve and check user identity data when the entire application starts. Modify the code as follows:

/ /... <script> export default { name: "App", mounted() { const userInfo = localStorage.getItem("userInfo"); if (userInfo) { this.$store.commit("SET_USER", JSON.parse(userInfo)); }}}; </script> // ...Copy the code

As you can see, we check for userInfo data from localStorage and, if so, store the user identity data into the state via SET_USER Mutation.

Integrate user logic in the Header component

Open the head component client/SRC/components/Header. The vue, we add the user logic system, modify the code is as follows:

/ /... <script> export default { props: ["activeIndex"], data() { return { model: { manufacturer: { name: "", _id: "" } } }; }, computed: { isLogged() { let token = this.$store.state.user.token; return !! token; }, avatar() { let photo = this.$store.state.user.photo; return photo; } }, methods: { handleLogout() { localStorage.removeItem("token"); localStorage.removeItem("userInfo"); this.$store.commit("LOGOUT"); }}}; </script>Copy the code

As you can see, we mainly made the following changes:

  • theisLoggedFrom the originaldataBecomes a calculated property, obtained from the Vuex StoretokenExists to determine whether to log in
  • addedavatarComputes the property used to get the user’s avatar from the Store
  • To achieve thehandleLogoutMethod to handle logout logic, including fromlocalStorageThe removal oftoken 和 userInfoData and initiate oneLOGOUTMutation is used to update the state of the Store

The login page is implemented using Authing Guard

Guard is an embeddable login form from Authing that allows us to integrate login and registration functions for the entire application in just a few lines of code, with the following results:

The overall effect is OK, and we can easily customize it with a few configuration items. Here’s how to do it.

First, we integrate Authing Guard by introducing the Authing UMD build file. In the client/index.html file with the script tag:


      
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>vue-online-shop</title>
  </head>
  <body>
    <div id="app"></div>
    <! -- built files will be auto injected -->
    <script src="https://cdn.jsdelivr.net/npm/@authing/guard/dist/Guard.umd.min.js"></script>
  </body>
</html>
Copy the code

Then open the Login page components client/SRC/pages/user/Login. Vue, modify the code is as follows:

<template> <div id="login-form"></div> </template> <script> export default { data() { return { model: { manufacturer: { name: "", _id: "" } } }; }, mounted() { const appId = ""; const userPoolId = ""; const domain = "https://tuture-first.authing.co"; Const form = new Guard (userPoolId, {logo: "https://tuture.co/images/avatar.png", the title: "full stack mini electric business figure finch," mountId: "login-form", hideClose: true }); const that = this; form.on("authenticated", userInfo => { that.$store.commit("SET_USER", userInfo); localStorage.setItem("token", JSON.stringify(userInfo.token)); localStorage.setItem("userInfo", JSON.stringify(userInfo)); that.$router.push("/"); }); }}; </script>Copy the code

We initialize Guard instances in the Mounted lifecycle method. When initializing Guard instances, the first parameter is the user pool ID (remember to change to your own user pool ID!). , available from the Authing console. The second parameter is a set of options for the Guard component:

  • logoIs our entire website Logo picture link
  • titleIs the title of the entire login form
  • mountIdIs the DOM ID used to mount the login form, which is unique in the templatedivThe elementlogin-form
  • hideCloseUse to hide the close button because we made the login a separate page and don’t want the user to close the login form (which would leave the page blank).

Tip Please refer to the official documentation for the complete Guard constructor API.

After the Guard component is initialized, we also need to add a listener event function for successful authentication, form.on(“authenticated”, handler). As you can see, in the callback function we do three things:

  1. aSET_USERMutation, changes the Store state
  2. inlocalStorageIs used to store user information obtained after login
  3. through$routerRoute redirects to the home page

For more callback events, see the complete list of events.

After configuration, open the app, click the login button, and you can see our cool login page:

It looks great!

Add permission management and route guard

In this step, we will configure permission management and route guard. Permission management is easy to understand. When a user does something that requires a login (such as adding to a shopping cart), it determines whether the user is logged in and redirects to the login page if not logged in. The so-called route guard (or navigation guard) determines whether the user has enough permission before entering a specific route (page). If the permission is not enough, the user will be directly redirected to the login page; otherwise, the user is allowed to enter the page.

In our application, there are three main areas where permissions need to be configured:

  • Product Add Button
  • Shopping Cart
  • Background Management (Admin)

Let’s take them one by one.

Add Permission management for the Add button

First, we need to add buttons to configure permission management for goods. Open client/SRC/components/products/ProductButton vue components, modification of the methods of addToCart and removeFromCart method, the code is as follows:

/ /... <script> export default { // ... methods: { addToCart() { const token = localStorage.getItem("token"); const that = this; if (token) { this.$store.commit("ADD_TO_CART", { product: this.product }); $confirmButtonText: confirmButtonText: cancelButtonText: cancelButtonText: cancelButtonText: cancelButtonText: cancelButtonText: cancelButtonText: cancelButtonText: cancelButtonText: cancelButtonText: cancelButtonText: cancelButtonText: cancelButtonText: cancelButtonText: cancelButtonText: cancelButtonText: cancelButtonText: cancelButtonText: cancelButtonText "warning" } ) .then(() => { that.$router.push("/user/login"); = > {}). The catch () enclosing $message ({type: "info", the message: "you have to cancel"}); }); } }, removeFromCart(productId) { const token = localStorage.getItem("token"); const that = this; if (token) { this.$store.commit("REMOVE_FROM_CART", { productId }); } else {this.$alert(" You are not logged in yet ", {confirmButtonText: "to log in ", cancelButtonText:" to log in ") "Cancel"}). Then (() = > {that. $router. Push ("/user/login "); = > {}). The catch () enclosing $message ({type: "info", the message: "you have to cancel"}); }); }}}}; </script>Copy the code

It can be seen that the idea to implement the permission management is simple: first, determine whether the token used for authentication exists from localStorage. If it exists, it indicates that the user has logged in and performs the corresponding Mutation. If no token exists, an Alert dialog box is displayed asking the user whether to go to the login page for login.

Implement route guard for shopping cart

Then we implement the route guard for the shopping cart. Fortunately, the Vue Router already provides us with a component-level route guard method, beforeRouteEnter. Open the client/SRC/pages/Cart. Vue, modify the code is as follows:

/ /... <script> // ... export default { name: "home", // ... beforeRouteEnter(to, from, next) { const token = localStorage.getItem("token"); if (! token) { next("/user/login"); } else { next(); }}}; </script>Copy the code

Try to obtain token in localStorage to determine the login status, and then enter the appropriate route through the next function.

Realize the routing guard of background management

Similarly, we implement route guards for admin pages. Open the client/SRC/pages/admin. Index. The vue, add the routing guard method, the code is as follows:

/ /... <script> // ... export default { // ... beforeRouteEnter(to, from, next) { const token = localStorage.getItem("token"); if (! token) { next("/user/login"); } else { next(); }}}; </script>Copy the code

Once this is done, open the application and see what the application looks like with permission management and route guard added:

Integrate user systems with existing databases

It is not enough just to implement login and registration functions; we also need to integrate user systems into existing databases. For example, when we add goods, we want to be able to bind to a specific user.

Fortunately, we are using a MongoDB database, so unlike traditional relational databases that require tedious table structure updates, you only need to change the data model definition.

Update Mongoose data definition

First let’s update a wave of Mongoose data definitions. Open server/model/index.js and change the code as follows:

// ...

const productSchema = Schema({
  id: ObjectId,
  name: String.image: String.price: String.description: String.user: String.manufacturer: { type: ObjectId, ref: "Manufacturer"}});const manufacturerSchema = Schema({
  id: ObjectId,
  name: String.user: String});// ...
Copy the code

As you can see, we mainly added the user field to the productSchema and manufacturerSchema data models, nothing else needs to be changed.

Configuration Vuex Action

We then modified the project’s actions to record user data when the two new actions (addProduct and addManufacturer) created the model. Open the client/SRC/store/actions. Js, modify the code is as follows:

// ...
export const productActions = {
  // ...
  addProduct({ commit, state }, payload) {
    commit(ADD_PRODUCT);

    const { product } = payload;
    const _id = state.user._id;
    axios
      .post(`${API_BASE}/products`, {
        ...product,
        user: _id,
        manufacturer: product.manufacturer._id
      })
      .then(response= > {
        // ...
      })
      .catch((a)= > {
        // ...}); }};export const manufacturerActions = {
  // ...
  addManufacturer({ commit, state }, payload) {
    commit(ADD_MANUFACTURER);
    const { manufacturer } = payload;
    const _id = state.user._id;

    axios
      .post(`${API_BASE}/manufacturers`, { ...manufacturer, user: _id })
      .then(response= > {
        // ...
      })
      .catch((a)= > {
        // ...}); }};Copy the code

In this case, when we create a new data request, we pass in the _id of user, so that the corresponding goods and manufacturers in the database will record the corresponding user ID.

Add account Settings and modify information

In the final step, we will use the Authing SDK to implement more fine-grained user identity management, as well as a profile Settings page. Install Authing’s JavaScript SDK with NPM first:

npm install authing-js-sdk
Copy the code

Modify the Header account Settings link

First, let’s modify the account Settings link in the Header. Open the client/SRC/components/Header. Vue, modify the code is as follows:

<template> <div class="header"> // ... <div class="header-right"> <el-dropdown v-if="isLogged"> <el-avatar class="el-dropdown-link" :src="avatar"></el-avatar> <el-dropdown-menu slot="dropdown"> <el-dropdown-item> <router-link to="/user/ Settings "tag="div"> account Settings </router-link> </el-dropdown-item> <el-dropdown-item> <div @click="handleLogout"> Exit </div> </el-dropdown-item> </el-dropdown-menu> </el-dropdown> // ... </div> </div> </template> // ... <script> import Authing from "authing-js-sdk"; export default { // ... methods: { async handleLogout() { const userPoolId = ""; const token = JSON.parse(localStorage.getItem("token")); const userId = JSON.parse(localStorage.getItem("userInfo"))._id; const authing = new Authing({ userPoolId }); try { const res = await authing.checkLoginStatus(token); console.log("res", res); await authing.logout(userId); This.$message({message: "success", type: "success"}); } catch (err) { console.log("err", err); } localStorage.removeItem("token"); localStorage.removeItem("userInfo"); this.$store.commit("LOGOUT"); }}}; </script>Copy the code

As you can see, we made two major changes:

  1. Adjust the “Account Settings” link in the template, replacing the original Authing link with this app link/user/settingsRouting, which we’ll do in a second
  2. inhandleLogoutIn the method, we are inlocalStorageErase user information before passingauthing.checkLoginStatusCheck login status and passauthing.logoutPerform the logout operation

Implement the Setting account Setting page

Open the already created good Settings page before client/SRC/pages/user/Setting. The vue, achieve personal information the user Settings page, the HTML code is as follows:

<template> <div> <app-header></app-header> <div class="user-container"> <div class="user-form"> <el-upload class="avatar-uploader" action="https://imgkr.com/api/files/upload" :show-file-list="false" :on-success="handleAvatarSuccess" > <img v-if="imageUrl" :src="imageUrl" class="avatar" /> <i v-else class="el-icon-plus  avatar-uploader-icon"></i> </el-upload> <el-form :model="user" :rules="rules" ref="ruleForm" label-width="100px" Class =" demo-ruleform ">< el-form-item label=" nickName"> <el-input V-model ="user.nickname"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')" > </el-form-item> </el-form> </div> </div> </div> </template> <style> .avatar-uploader .el-upload { border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; } .avatar-uploader .el-upload:hover { border-color: #409eff; } .avatar-uploader-icon { font-size: 28px; color: #8c939d; width: 178px; height: 178px; line-height: 178px; text-align: center; } .avatar { width: 178px; height: 178px; display: block; } .user-form { width: 500px; } .user-container { display: flex; flex-direction: row; justify-content: center; } </style> <script> import Header from "@/components/Header.vue"; import Authing from "authing-js-sdk"; export default { data() { return { user: {}, imageUrl: "", rules: { nickname: [ { required: true, message: "Please enter your nickname ", trigger: "blur"}, {min: 3, Max: 25, message:" length between 3 and 25 characters ", trigger: "blur"}]}}; }, created: function() { const user = this.$store.state.user; const userInfo = localStorage.getItem("userInfo"); if (user && Object.keys(user).length === 0 && userInfo) { this.user = JSON.parse(userInfo); this.imageUrl = this.user.photo; } else { this.user = { ... user }; this.imageUrl = user.photo; } }, components: { "app-header": Header }, methods: { async handleAvatarSuccess(res, file) { if (res.code === 200) { this.imageUrl = res.data; } else {this.$message.error(" image failed to upload "); } }, async submitForm(formName) { const nickname = this.user.nickname; const photo = this.imageUrl; const userId = this.user._id; const user = this.user; const that = this; this.$refs[formName].validate(async valid => { if (valid) { const token = localStorage.getItem("token"); const userPoolId = ""; const authing = new Authing({ userPoolId }); const login = await authing.login({ email: "", password: "" }); console.log("nickName", nickname); try { await authing.update({ _id: login._id, photo, nickname }); const newUser = { ... user, nickname, photo }; localStorage.setItem("userInfo", JSON.stringify(newUser)); that.$store.commit("SET_USER", newUser); This.$message({message: "info ", type: "success"}); } catch (err) { console.log("err", err); This.$message.error(" failed to modify message "); } } else { console.log("error submit!!" ); return false; }}); }}}; </script>Copy the code

Let’s focus on the Script and template sections. First in the Script section, our components include:

  • dataFields define the data needed in the template, includinguser 、imageUrl(Avatar link) andrules(Form verification rule)
  • createdThe lifecycle method is used from the Vuex Store as welllocalStorageTo obtain user data (localStorage), and initialize the abovedatafield
  • componentsIs used to specify theapp-headerThe component is the one we just modifiedHeadercomponent
  • methodsDefined in thehandleAvatarSuccess 和 submitFormTwo handlers, one for the logic of successfully uploading the avatar and the other for submitting the form. insubmitFormMethod, we get the corresponding data from the form and passauthing.updateUpdate user data, and then modify the status in the Vuex Store

Adjust the App root component

Let’s tweak the App root component. Open client/ SRC/app. vue and modify the code as follows:

/ /... <script> import Authing from "authing-js-sdk"; export default { name: "App", mounted() { this.checkLogin(); }, methods: { async checkLogin() { const token = localStorage.getItem("token"); if (token) { const userPoolId = ""; const authing = new Authing({ userPoolId }); const result = await authing.checkLoginStatus(JSON.parse(token)); if (result.status) { const userInfo = localStorage.getItem("userInfo"); if (userInfo) { this.$store.commit("SET_USER", JSON.parse(userInfo)); } } else { localStorage.removeItem("token"); localStorage.removeItem("userInfo"); }}}}}; </script> // ...Copy the code

The checkLogin method is used to check the login status when the whole application is just mounted. If the login succeeds, the data will be retrieved from the storage and set into the Redux Store. If the login fails, the local storage information will be cleared.

Adjust other pages

Finally, let’s tweak some details on the other pages. Modify the client/SRC/pages/user/Index. The vue, the code is as follows:

<template>
  <div>
    <div class="container">
      <router-view />
    </div>
  </div>
</template>

<style></style>
Copy the code

Continue to modify the client/SRC/pages/user/Login. Vue, the code is as follows:

<template> <div> <h1 class="user-title"> <router-link to="/" tag="div"> User interface </router-link> </h1> <div id="login-form"></div> </div> </template> <style> .user-title:hover { cursor: pointer; } </style> // ...Copy the code

When saving the modified code above, we can see something like this:

Integrate wechat, QQ login or Github login

Through the above process, we’re done with a full user system and its integration with existing systems, but have found a classmate, we live or work at ordinary times, in addition to the regular phone number + captcha, passwords, etc., there will be some more convenient way to log in, such as login WeChat, QQ login, how can we integrate these convenient log in? In fact, it may seem very complicated, but based on our existing basis, Authing can easily integrate wechat, QQ login, etc.

Note that only enterprises can integrate wechat or QQ login. If you are an individual developer, you can skip this section at 🤓

Integrated wechat scan code login

First go to the official document of wechat to complete the registration, then apply for a wechat web application, and then get the AppID and AppSecret of wechat web application:

Then slide to the bottom to change the authorization callback field to oauth.authing.cn

Then we went to the Authing console and filled the AppID and AppSecret we just obtained in the corresponding wechat login:

Notice that the third parameter “redirect address” has filled in the development server address of our Vue full-stack e-commerce application. Readers should fill in the corresponding address according to their current needs.

Now that you’re done, we’ve configured the wechat web login through the steps above. You should now see something like this:

My god! Amazing! Is the above a few work points according to the configuration, we will integrate wechat login! 😅

Integrated QQ login

We went to the QQ Internet center, registered an account and created a web application in a similar way to logging into the wechat web page.

Then go to the web app and fill in the authorization callback address as: [https://oauth.authing.cn/oauth/qq/redirect] (https://oauth.authing.cn/oauth/qq/redirect), and then back to Authing console, we configure QQ login:

Save, and you’re done! We have QQ login inside the application, and wechat login is as simple!

Integrate Github login

Finally, let’s try to integrate the developer’s favorite Github login and see how Authing simplifies this effort.

First, follow the Github guidelines to create an OAuth application.

Then fill in the following:

The content in the red box should be filled in with Authing related [https://oauth.authing.cn/oauth/github/redirect] (https://oauth.authing.cn/oauth/github/redirect), and then create good application, Client ID and Client Secret:

Go to the Authing console and configure Github as follows:

Finally, you can see the following effect:

summary

This is the end of the tutorial. You have already experienced the power and convenience of Authing’s authentication mechanism. In today’s Serverless era, more and more standardized processes (such as identity authentication, artificial intelligence application, etc.) are gradually moving towards the cloud, become a kind of direct consumption of resources, and we as terminal application developer can put more time and energy in grinding and perfect their own products, liberated the productive forces to a certain extent.

Adhering to the concept of “accelerating the spread of technology”, The Tuq community is committed to promoting technologies that can truly make the lives of developers and users better.

Want to learn more exciting practical skills tutorial? Come and visit the Tooquine community.