Shulou(Shulou.com)06/02 Report--

This article will explain in detail how to achieve login authentication in vue-nuxt. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Start

According to this document description, after using @ nuxt/auth, if the specified cookie: false is not displayed, the auth token will be stored in cookie by default (the same is true of the previous localstorage)

So after the login interface is successful, token will be stored in the form of auth._token. {provider}

After that, the interface takes the token from the cookie upon request and sends it to the server as the interface credential.

Directory structure

Nuxt-dist is the file generated by webpack after each npm run dev or npm run build, and the code in it can be regarded as the last code we actually called (you can also modify and debug it here, but restore it every time you run the project again).

Nuxt/auth has several schemes schemes. For example, look at this nuxt-dist/auth/schemes/local.js.

There are several default options:

In the code we wrote, we used the $auth.loginWith call, but in fact, loginWith ended up calling login.

Then take a look at login. Is it still in nuxt-dist/auth/schemes/local.js?

Nuxt-dist is the file generated by webpack after each npm run dev or npm run build, and the code in it can be regarded as the last code we actually called (you can also modify and debug it here, but restore it every time you run the project again).

Nuxt/auth has several schemes schemes. For example, look at this nuxt-dist/auth/schemes/local.js.

There are several default options:

In the code we wrote, we used the $auth.loginWith call, but in fact, loginWith ended up calling login.

Then take a look at login. Is it still in nuxt-dist/auth/schemes/local.js?

The this.name in the method, that is, auth.strategy, that is, local, local1, and setStrategy () in the above loginWith method stores the auth.strategy information locally.

After success, tokenRequired defaults to true and calls this.$auth.setToken. This method is in auth/schemes/auth.js.

In this method

In this method, _ key is assembled into. _ token.local

This method is in auth/storage.js.

Finally, this method calls the setCookie and serLocalStorage methods, storing the token in coookie and localstorage

In setCookie, assemble again and add cookir.prefix. The default is auth.

Finally, it is serialized and stored in cookie.

The subsequent axios is taken directly in the cookir and sent with the request.

The whole login and authentication logic is basically like this.

Keep going into the code.

Multiple auth can also be configured in nuxt.config.js: {strategies: {local

Wechat login, mobile phone login, account login.

AutoFetch

Https://auth.nuxtjs.org/schemes/local

Fetch User

The uth module does not save information about the user, so there needs to be a way to get information about the user, such as a page reload. This is what the user endpoint is for. By default, this is also called after a successful login.

If user.autoFetch is true (the default), endpoints.user sends a request immediately after a successful login. The endpoint should respond with JSON information for a specific user, which is assigned directly to the user attribute.

If you want to return user information directly from the login session, configure user.autoFetch to false, get the user information from the loginWith response, and pass it to setUser. Exe.

If you want to completely disable access to user information, set endpoints.user: false. This means that the user information endpoint will never be called, but it also means that the front end knows nothing about the user; this.$auth.user will {}.

Ps: due to the need to replace the interface, user will query it automatically, and the resulting error report is not conducive to development. You can develop it step by step through comments.

User: {autoFetch: false,}

Proxy configuration

The back-end interface of the project is based on the back-end low-code platform and the java interface. The name at the beginning of the interface is inconsistent, which can be dealt with through proxy, or cross-domain problems can be solved.

Axios: {/ baseURL:'' proxy: true, prefix:'/', / / credentials: false,}, proxy: {'/ biz': {target: 'http://xxlb/', pathRewrite: {' ^ / biz':'/ biz/', changeOrigin: true / / indicates whether cross-domain} '/ front': {target:' http://xxlb/', pathRewrite: {'^ / front':'/ api/front', changeOrigin: true / / indicates whether cross-domain}}, request intercept axios: {/ baseURL:'' proxy: true, prefix:'/', / / credentials: false,} Proxy: {'/ biz': {target: 'http://xxlb/', pathRewrite: {' ^ / biz':'/ biz/', changeOrigin: true / / indicates whether cross-domain}},'/ front': {target: 'http://xxlb/', pathRewrite: {' ^ / front':'/ api/front' ChangeOrigin: true / / indicates whether to cross-domain}}, dealing with interfaces with different prefixes

Dev is used in a local dev environment and cannot be used when deployed to a server.

You define a file, such as apiPrefix.js

In this file, you enumerate the correspondence between all the different interfaces and their prefixes

Const temp = {api: ['/ front/login', 'xxxxxx',' xxxxx'], api2: ['/ test', 'xxxxxx'], xxx: […] }

This is tantamount to explicitly listing all the interfaces you need to prefix.

In the request interception of axios, according to the current request url, traverse the temp to determine which prefix it belongs to, and then assemble it.

For those requests that cannot be found in this temp, that is, they do not need to be prefixed by default, just let it go.

There are three benefits.

First, when you maintain it, you can see at a glance which interfaces you have and what prefixes you need to add.

Second, when you make a request on the page, you can make sure that it is called in the same way without changing it on each url.

Third, if the subsequent batch prefix is modified, it will be easy for you to change it.

If the production environment needs to call other server interfaces, it must also have certain rules, if there are rules, we match the rules and then modify them.

Or part of the interface. In that case, we can also use a similar method mentioned above, which is nothing more than becoming

Const temp = {http://10.0.0.1/api: ['/ front/login', 'xxxxxx',' xxxxx'], http://10.0.0.1/api2: ['/ test', 'xxxxxx'], http://10.0.0.1/xxx: […] ,... Http://10.0.1.111/api: ['/ sth/xxx']}

Extend the prefix range to include protocols and domain names

Configuration of dynamic routin

Https://www.nuxtjs.cn/guide/routing

You will find the routing path named users-id with: id? Parameter that indicates that the route is optional. If you want to make it a required route, you need to create an index.vue file in the users/_id directory.

Nuxt-dist will automatically package and generate configuration

Redirect and auth permissions

Https://auth.nuxtjs.org/guide/middleware

What is said here is that the permission verification of auth can be placed globally or in each route. You can also turn it off so that the middleware skips checking. Finally, it also introduces a usage, guest mode, that is, you don't have to log in to access this route, but if a logged-in user accesses this page, it will be redirected to the route set by redirect.home.

Scene

Some scenarios need to be accessed in login state, otherwise they will be redirected to the / login page. Now that you have done the processing, you can set auth:false to deal with some pages so that he does not have to redirect to login. For example, the page I encounter now generates a registration link through the background before registering. This page does not need token information.

This is the end of the article on "how to achieve login authentication in vue-nuxt". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.