一、登入後顯示

1）Msite.vue頭部登入後資訊

<TopHeader :title='address.name'>
 <!-- 【1】點圖示跳轉到搜尋頁 -->
 <router-link to="/search" class="header_search" slot='left'>
     <i class="iconfont icon-sousuo"></i>
 </router-link>
  <!-- 【3】狀態中有使用者id說明已登入，跳轉到個人中心，否則跳轉到登入頁 -->
 <router-link :to=" userInfo._id ? '/profile':'/login'" class="header_login" slot='right'>
    <!-- 【4】未登入顯示登入，否則顯示個人中心小圖示 -->
    	<span class="header_login_text" v-if="!userInfo._id">
        登入|註冊
      </span>
      <span class="header_login_text" v-else>
         <i class="iconfont icon-person"></i>
      </span>
  </router-link>
</TopHeader>


import {mapState} from 'vuex' //1呼叫vuex管理的狀態
computed:{
    //把vuex管理的狀態:地址/滑動導航分類解構到當前位置
    /*mapState返回的值：函式(物件)引數來自store/state.js*/
    // 【2】讀取狀態中的使用者資訊
    ...mapState(['address','categorys','userInfo']),
略過...
}

效果：http://localhost:8080/

左：跳轉到搜尋 右：由註冊變圖示，點跳轉到個人中心

2）profile.vue登入後資訊

<!-- 【2】如果已經登入，則跳轉到個人資料,否則跳轉到登入頁面 -->
          <router-link :to="userInfo._id ? '/user_info' : '/login'" class="profile-link">
            <div class="profile_image">
              <i class="iconfont icon-person"></i>
            </div>
            <div class="user-info">
              <!-- 沒有手機號則顯示使用者名稱或登入註冊 -->
              <p class="user-info-top" v-if="!userInfo.phone">{{userInfo.name || '登入/註冊' }}</p>
              <p>
                <span class="user-icon">
                  <i class="iconfont icon-shouji icon-mobile"></i>
                </span>
                <span class="icon-mobile-number">{{userInfo.phone || '暫無繫結手機號'}}</span>
              </p>
            </div>
            <span class="arrow">
              <i class="iconfont icon-jiantou1"></i>
            </span>
          </router-link>

import {mapState} from 'vuex'
export default{
  computed:{
    //讀取狀態中的userInfo
    ...mapState(['userInfo'])
  }
}

效果：http://localhost:8080/#/profile

二、保持登入狀態

原理：cookie結合後端session保持登入

保持登入詳：https://blog.csdn.net/a754895/article/details/82632747

a.根目錄/app.js 使用session設定cookie的會話時間為一天

app.use(session({
  secret: '12345',
  //設定maxAge是80000ms，即80s後session和相應的cookie失效過期
  cookie: {maxAge: 1000*60*60*24 },  
  resave: false,
  saveUninitialized: true,
}));

b.routes/index.js

重點：從此處開始:UserModel.findOne(

/*
密碼登陸
 */
router.post('/login_pwd', function (req, res) {
  const name = req.body.name
  const pwd = md5(req.body.pwd)
  const captcha = req.body.captcha.toLowerCase()
  console.log('/login_pwd', name, pwd, captcha, req.session)

  // 可以對使用者名稱/密碼格式進行檢查, 如果非法, 返回提示資訊
  if(captcha!==req.session.captcha) {
    return res.send({code: 1, msg: '驗證碼不正確'})
  }
  // 刪除儲存的驗證碼
  delete req.session.captcha

  UserModel.findOne({name}, function (err, user) {
    if (user) {
      console.log('findUser', user)
      if (user.pwd !== pwd) {
        res.send({code: 1, msg: '使用者名稱或密碼不正確!'})
      } else {
        req.session.userid = user._id
        res.send({code: 0, data: {_id: user._id, name: user.name, phone: user.phone}})
      }
    } else {
      const userModel = new UserModel({name, pwd})
      userModel.save(function (err, user) {
        // 向瀏覽器端返回cookie(key=value)
        // res.cookie('userid', user._id, {maxAge: 1000*60*60*24*7})
        req.session.userid = user._id
        const data = {_id: user._id, name: user.name}
        // 3.2. 返回資料(新的user)
        res.send({code: 0, data})
      })
    }
  })
})

1）src/api/index.js

// 9、根據會話獲取使用者資訊
export const reqUserInfo = () => ajax(BASE_URL+'/userinfo')

2）src/store/state.js

userInfo: {}, // 使用者資訊

3）mutation-types.js

export const RECEIVE_USER_INFO = 'receive_user_info' // 接收使用者資訊

4）mutations.js

import {RECEIVE_USER_INFO} from './mutation-types.js'

export default{
[RECEIVE_USER_INFO](state,{userInfo}){state.userInfo=userInfo},
}

5）src/store/actions.js

// 控制mutations
import {
  ...略過
  RECEIVE_USER_INFO,
} from './mutation-types.js'
import {
  ...略過
  reqUserInfo, //獲取session的使用者資訊
} from '../api/index.js'

export default{
//非同步獲取自session中的使用者資訊
	async getUserInfo({commit}){
		const result=await reqUserInfo()
		if(result.code===0){
			const userInfo=result.data
			commit(RECEIVE_USER_INFO,{userInfo})
		}
	},
}

6）app.vue

頁面載入時，發起一次獲取使用者資訊請求，實現登入保持

//【0】引入vuex的action
import {mapActions} from 'vuex'

export default{
mounted(){
		/* 呼叫actions方法1：getAddress來源actions.js
		this.$store.dispatch('getAddress')*/
		// 【1】呼叫actions方法2：
		this.getAddress()
		this.getUserInfo()

	},
	methods:{
		// 【2】呼叫actions方法2：把getAddress方法解構到當前位置
		// mapActions() 返回的是一個物件, 
		// 用了 ... 擴充套件符後，才可以放進一個物件裡，
		// 和其他元件內定義的 method 在同一個 methods 物件。
		// 引數來自：store/actions.js內的方法
		...mapActions(['getAddress','getUserInfo'])
	}
}

效果：登入成功之後，一天內無論是重新整理還是關閉瀏覽器重新進網站都會保持登入狀態