Shulou(Shulou.com)05/31 Report--

This article mainly explains the "nuxt uses vuex storage and access to user information pit how to solve", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in-depth, together to study and learn "nuxt use vuex storage and access to user information pit how to solve" it!

I. background

According to the requirements of the company to do an e-commerce website, taking into account the seo, so using nuxt for development.

User information (user) is recorded after login using cookie+vuex mode.

2. Specific usage and problems encountered

1. Unable to decode can not be converted to an object and does not support Chinese:

NuxtServerInit using nuxt obtains user information in the cookie of the server, but user uses js-cookie when storing, and the client has encoded the data and may contain Chinese. When converting string to object with JSON.parse, consider decoding and use decodeURI, but there is no window object on the server, so this method is not possible, because this project uses koa and does not support Chinese.

2. The token fails, the page enters an endless loop and the rendering cannot be completed:

Using the nuxtServerInit of nuxt to obtain the stored token,token in the server's cookie can be obtained normally, because the token is a string and does not contain Chinese, and then determine whether the user is logged in according to whether the value of token is empty, and then decide whether to send a request to obtain user information.

Export const actions = {nuxtServerInit ({commit}, {req, app}) {let token = null let username = null if (req.headers.cookie) {const cookies = utils.getcookiesInServer (req) token = cookies.token? Cookies.token:''username = cookies.username? Cookies.username:''} commit ('setToken', token) commit (' setUsername', username) if (token) {const timestamp = Date.parse (new Date ()) / 1000 const {data: user} = await app.$axios.post ('api/MemberApi/QueryCInfo', {sid: 6100, timestamp, / / (required) UNIX timestamp typeKey:' person'}) commit ('setUser' User)}

There is a problem: if token fails, it will enter the 401 dead loop and the page will not be displayed properly.

Reason: the 401 error code of http is used by default instead of the non-login error code customized by the backend. If the http request is not successful, the server will never be able to complete the rendering, resulting in the client unable to display normally and has been tested with another same framework project.

3. Using the client to obtain user from cookie, the user can never be initialized:

The vuex data is stored in the cache, and the commit operation is performed when logging in, and the user information can be obtained without refreshing the page. However, when the page is refreshed, the user information stored in vuex is lost. If the server cannot obtain user, the client can obtain it, but the user information can never be obtained. The following figure shows how the client acquires user information:

Import utils from'@ / utils/getCookie'const Cookie = process.client? Require ('js-cookie'): undefinedexport const state = () = > ({user: utils.getcookiesInClient (' user'), token:', username:''})

Reason: nuxt is the integration of server and client rendering, so the server initializes the user information to null, and the client cannot initialize it again. Even if the user information can be obtained in the client's cookie, it cannot assign a value to user. A test comparison is made, and if the project is in vue single page mode, there is no problem using the above aspects to obtain user information.

III. Solutions

1. There are two situations in mutation

The value is taken from cookie if the data is empty, and the user information is reset if the data is not empty. When refreshing the page, call mutation commit to obtain user information forcefully when the page is refreshed.

Store/index.js

Export const mutations = {setUser (state, user) {if (! user) {state.user = utils.getcookiesInClient ('user')} else {state.user = user}

Main.js

Export default function (app) {if (process.client) {app.store.commit ('setUser')}}

2. Use buffer to convert user to base64 encoding during storage

Convert it back with buffer on the server side. This method can solve not only the transcoding problem, but also the Chinese problem. However, this method does not apply to ie9 and the following browsers.

Save:

GetUser ({commit}) {return new Promise ((resolve, reject) = > {const timestamp = Date.parse (new Date ()) / 1000 this.$axios .post ('api/MemberApi/QueryCInfo', {sid: 6100, timestamp, / / (required) UNIX timestamp typeKey:' person'}) .then (res) = > {commit ('setUser') Res.data) Cookie.set ('user', res.data, {expires: 7}) Cookie.set (' user', Buffer.from (JSON.stringify (res.data)) .toString ('base64'), {expires: 7}) resolve (res)}) .catch ((error) = > {reject (error)})

Turn to:

NuxtServerInit ({commit}, {req, app}) {let token = null let username = null let user = null if (req.headers.cookie) {const cookies = utils.getcookiesInServer (req) token = cookies.token? Cookies.token:''username = cookies.username? Cookies.username:''user = JSON.parse (Buffer.from (cookies.user,' base64'). ToString () commit ('setUser', user) commit (' setToken', token) commit ('setUsername', username)}}

Thank you for your reading, the above is the "nuxt use vuex storage and access to user information pit how to solve" the content, after the study of this article, I believe you on the nuxt use vuex storage and access to user information pit how to solve this problem has a deeper understanding, the specific use of the situation also needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.