Frequently Asked Questions in Interviews

1. How to handle login permissions in the project (how to do login routing guards in the project)

Add one to the page that requires login permission in the routing configuration meta：{isRequireLogin:true}, indicating that login permission verification is required after jumping to this page

{
    path: '/user',
    meta: {
        requiredLogin: true
    },
    component: () => import('@/views/User/Index.vue')
}

Obtained (to, from, next)from the three parameters in the routing guard , if there is and is true, you need to perform login verification on the pagetometa.isRequireLogin

// 路由守卫，登录判断，以及主子页面之间的切换
router.beforeEach((to, from, next) => {
  const { requiredLogin } = to.meta;
});

Then get the login from the local storage localstoreto see if the user has logged in. If logged in, the login can be obtained and it is true, and then released and executed. nextIf it cannot be obtained, it means that the user has not logged in, then jump to the login page

router.beforeEach((to, from, next) => {
  const { requiredLogin } = to.meta;
  const isLogin = localStorage.getItem("isLogin");
  // 判断是否已经登录并是否页面需要登录权限，如果是，跳转到登录页面，若否，则放行
  if (!isLogin && requiredLogin) {
    next("login");
  } else {
    next();
  }
});

2. How to use localStore local storage in the project

• Persistence of user login status : When the user logs in successfully, the user's identity or authentication token is stored in localStorage. This way, when the user refreshes the page or reopens the app, localStoragethe user can be kept logged in by checking for valid login information.
• Save and restore form data when purchasing : use localStorageto save form data. When the user temporarily leaves the page or refreshes the page, you can store the form data in localStorageand restore the data localStoragefrom it , avoiding the need for the user to fill it out again.
• Search records in the search interface : Store the searched record data in localStorage, and obtain it locally when needed, improving the user experience.

 3. If the token fails during login, how do you deal with it?

• Clear expired tokens : On the front end, you can clear tokens in local storage (such as localStorage or sessionStorage) and any authentication information associated with them. This can be achieved by calling the corresponding method (eg localStorage.removeItem('token').
• Redirect to login page : Once the token expires, the user needs to re-authenticate and get a new valid token. On the front end, you can do this by redirecting the user to the login page. You can use the methods provided by Vue Router router.push('/login')to navigate the user to the login page.
• Prompt user to log in again : To give the user explicit feedback, you can display a message or popup dialog informing the user that their token has expired and they need to log in again.

  4. There is a copy method in ES6, do you know that method? What other methods do you know of?

     In addition to Object.assignthis shallow copy method, there is

• Array.prototype.slice(), Array.prototype.concat()

• Copy using the spread operator

• deep copy

  Deep copy creates a new stack. The properties of the two objects are the same, but they correspond to two different addresses. Modifying the properties of one object will not change the properties of the other object.

  Common deep copy methods are:

• _.cloneDeep()
• JSON.stringify()
• handwritten loop recursion