Project Background:

It is still the project involved in the previous several articles, but now do permission control, but fortunately, now the business of this project is not complicated, it is still too late, can only comfort myself in this way

As shown below:

  1. After login is successful, the back end returns some basic information, function permissions, and identity permissions of the user account
  2. There’s nothing wrong with that in and of itself, the front end takes the data, stores it and then globally displays and restricts it, right
  3. Now the problem came. The client made a request that both me and the latter paragraph were dumbfounded

Customer: I don’t want to enter from your login page. I want to jump into your system from our other systems, so that our operators can directly fill in data, add new items and so on

Boss: Ok, no problem!

Back end: Boss, I don’t want to learn back end, whoo-hoo

I: back end eldest brother, you line, I believe you, the light of the right way, shine on the earth ~

Comprehensive analysis:

  • Small company, can’t help, the customer just like this, want to experience similar sso feeling, but do not want to give that money, Sister Li
  • And then, no way, a meeting. What’s the whole plan?
  • Finally, it was agreed that the back end would jump directly to my page, and I would give the back end the address and everything,
  • Didn’t the customer say to fill in the data? Line, the back end passes the parameter directly from the URL bar, and I pull it out to display
  • Oh, wait a minute. Did you forget one important thing? The backend generates a URL to access my page
  • But how do I get the data in the picture above? The top one is returned by the login interface,
  • Your user does not jump my login page ah, that is not come in what all have no ah, and permission and identity I how control?
  • Okay, this back end is starting to load up

I'm going to give you a new interface, and you're going to check if it's from login, because you're not just asking me for this, and it's going to return the same value as login

  • Big brother, awesome, ok.

Specific plan:

  1. There are a lot of articles on the Internet about how to do front-end permission control and so on. Just look at them more. Here is not a detailed display of front-end permission control
  2. But they mostly use Vuex, I don’t really like using it, or am I too lazy to learn grammar
  3. Therefore, I saved the user’s information, I used a global $bus to save, or a little more convenient than vuex, personally think, don’t spray if you don’t like

The backend generates a link like this for the user to go directly to http://your IP: Your port/ API /lifecyle? Account = 182XXXX5981&role = IN_role &op= new-PRj&OPPID = 12345&prjName =xx skynet &city=xx&county= XXXX&cons-1-com = company name &cons-1-person= GR j&cons-1-phone=181111111111&cons-2-com=xxx&cons-2-person=lll&cons-2-phone=1392222222&sel-cons-com=A&sel-cons-person=aa&s el-cons-phone=139111111111&sign=8c99c4ce9fcfde232c330450bea0e88d

Preview opens:

Necessary note:

Friends might want to know how to do that, but let me just say a few words. Okay

  1. Since the login uses cookies, the login cookie is already recorded on the back end when the link is generated, so it is possible to log in
  2. Fetching data is not said, the previous article has also written about URL fetching parameters
  3. Fill in only if there is a parameter sent from the back end, and leave it blank if there is no parameter
  4. The above three points are quite basic (chunshufeihua). In fact, the most troublesome problem is the latter one

You can login, but it will interact with your own login, for example:

If the user is logged in as admin1, and the user is logged in as Admin2, then you need an if to check whether the user is logged in from login. If so, display the admin1 of login. If not, You should request the newly provided update_user_Info interface on the back end to display admin2 information

Now the core question is when and where should ———— write the "if"?

One thing to note is that this update_user_info must be a request written globally, otherwise it would be complicated

Vue request directly in app.vue, record user information, and provide, inject global use but there will be an asynchronous problem, sent to the request has not come back, will already need to use this data to display the page so, this is definitely not scientific, also wrong…

Until I saw this, and it gave me an idea:

Thanks to the rain Stream buff bonus, I decided to use the second option before navigation was complete

Code:

In main.js: define a global bus to store user information

import Vue from "vue";
window.$bus = new Vue({
  data() {
    return {
      account: {init: false.data: null}}; }}); Vue.prototype.$bus =window.$bus;
Copy the code

The router. In js:

import Vue from "vue";
import VueRouter from "vue-router";
import Axios from "axios"; Vue.use(VueRouter); Directly using this route global front-guard perfectly solves my concerns especially yyds router. BeforeEach ((to, from, next) = > {
  / / the console. The log (' refresh! ');
  // console.log(to);
  if(to.name ! ="login") {write thisifThe goal is to avoid throttling every page you enterif (!window.$bus.account.init) {
      Axios({
        url: "/api/user/update_user_info".method: "POST".responseType: "json",
      })
        .then((data) = > {
          // console.log("update", data);
          window.$bus.account.init = true;
          window.$bus.account.data = data.data; Next (); next(); })}else{ next(); }}else{ next(); }});Copy the code

Conclusion:

  1. I started to save user information, using the browser storage, mainly do not want to refresh, the user what information is not, think there should be no big problem, but encounter this kind of business must change, there are so important data in the browser is not safe, anyway, later also long memory
  2. Still, read the documentation more, and don’t doubt Yoo’s abilities
  3. User experience is still very important. In the future, I will think more about interaction and function extension