vue 未登錄或登錄失效重定向到登錄頁，登錄后再回到登錄前的頁面

實現思路：

1.router中給需要登錄后才能訪問的頁面配置meta:{needLogin:true}

2.登錄頁面，調用登錄接口成功后，給cookie中存入用戶信息（我這里是存uuid和sessionid相關內容）

3.request.js的接口請求攔截器中，根據接口返回的code值判斷用戶是否登錄或登錄是否已失效（我這里是未登錄和已失效code==1000），失效的話，將cookie中的用戶信息移除

4. main.js中使用router.beforeEach，步驟1設置的需登錄才能訪問的頁面中，通過判斷cookie中是否有用戶的uuid和sessionid信息，確定用戶是否已登錄（未登錄時uuid信息肯定不存在，但登錄失效時uuid是存在的，所以要在步驟3中通過判斷code值，清除uuid新增）。當用戶未登錄時跳轉到登錄頁，並將當前頁面的重定向路徑帶到登錄頁面地址中

 

1.router index.js 配置哪些頁面需要登錄才能訪問

 

2.main.js判斷用戶是否已登錄（我用的cookie存儲的用戶信息，存儲方法在auth.js里。）

import Vue from 'vue'
import  * as auth from '@/utils/auth'

//判斷是否登錄
router.beforeEach(function (to, from, next) {
  if (to.meta.needLogin) {
    //從cookie中獲取用戶信息，判斷是否已登錄
    if (auth.getAdminInfo().userUuid) {
      next(); //表示已經登錄
    } else {
      //未登錄
      //next可以傳遞一個路由對象作為參數 表示需要跳轉到的頁面
      next({
        name: "login",
        query: {redirect: to.meta.redirect} //登錄后再跳回此頁面時要做的配置
      });
    }
  } else {
    //表示不需要登錄
    next(); //繼續往后走
  }
});

3.auth.js里代碼，重點部分標紅

import Cookies from 'js-cookie'

const TokenKey = 'Admin-Token'
const rolesName = "adminRoles" const adminInfo = "adminInfo"


//  存儲數據localStorage（數組對象格式）
export function setStorageObj(key,obj) {
  var str = JSON.stringify(obj);
  return localStorage.setItem(key,str);
}

//獲取數據（數組對象格式）
export function getStorageObj(key) {
  return JSON.parse(localStorage.getItem(key));
}

//存儲數據（字符串）
export function setStorage(key,data) {
  return localStorage.setItem(key,data);
}

//獲取數據（字符串）
export function getStorage(key) {
  return localStorage.getItem(key)
}

//清除數據（所有格式）
export function removeStorage(key) {
  return localStorage.removeItem(key);
}

//存儲token
export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}

//存儲角色
export function getAdminRoles() {
  const roles = Cookies.get(rolesName)
  if(roles){
      console.log(roles)
    return JSON.parse(roles)
  }
  return ''
}

export function setAdminRoles(roles) {
  return Cookies.set(rolesName, JSON.stringify(roles))

}

//獲取用戶信息
export function getAdminInfo() { console.log('獲取用戶信息') const admin = Cookies.get(adminInfo) if(admin){ return JSON.parse(admin) } return '' } //存儲用戶信息
export function setAdminInfo(admin) {
  return Cookies.set(adminInfo, JSON.stringify(admin))
}
//移除用戶信息
export function removeAdminInfo() {
  return Cookies.remove(adminInfo)
}

4.login.vue頁面

methods: {
        //登錄
        login(formName){
          this.$refs[formName].validate((valid) => {
            if (valid) {
              console.log('登錄',this.form)
              this.$store.dispatch('user/getUserLogin',this.form).then(() => {
                this.$router.push({ path: this.redirect || '/' })
              }).catch(() => {
                this.loading = false
              })
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        }
      }

5.vuex（調用登錄接口成功后，存儲用戶信息）

6.vuex登出

 

 

 

7.請求攔截

import axios from 'axios'
import { MessageBox, Message} from 'element-ui' import store from '@/store'
import ElementUI from 'element-ui'
import QS from 'qs'
import * as auth from '@/utils/auth'
// import router from '@/router'


// const hostUrl =  'http://192.168.0.189:8888'

// create an axios instance
const service = axios.create({
  // baseURL: hostUrl,
  timeout: 50000 // request timeout
})


//請求頭配置
service.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';


// request interceptor
service.interceptors.request.use(
  config => {
    //給請求頭添加內容的話，從這里配置
    // if (store.getters.token) {
    //   config.headers['Authorization'] = getToken()
    // }
    return config
  },
  error => {
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  response => {
    //未登錄、登錄過期code==1000
    if(response.data.code == 1000){ store.dispatch('user/logout').then(() => { location.reload() }) } //其他錯誤，根據接口返回數據的規律調整
    if(response.data.code != 200 && (response.data.code != 1000)){
      ElementUI.Message({
        type:'error',
        message:response.data.message
      })
      return Promise.reject('error')
    }

    return Promise.resolve(response.data)
  },

  error => {
    console.log('error',error);
    Message({
      message: '服務器內部錯誤',
      type: 'error',
      duration: 3 * 1000
    })
  return Promise.reject(error)
  }
 )

class http {
 static async getPage(url, params){
   return service.get(url, { params: params })
 }

 static async post(url, params){
   return service.post(url, QS.stringify(params))
 }
 static async postItem(url, params){
   if(!params){
     params = {};
   }
   // params['userUuid']='9E396DE798B240FA8D2162BFE6AC494C';
   // params['sessionId']='16e413064c97466c9bef6d9f9e69c5aa';

   // 獲取userUuid和sessionId
   params['userUuid'] = auth.getAdminInfo().userUuid;
   params['sessionId'] = auth.getAdminInfo().sessionId;
  return service.post(url, params)
 }

static async postNew(url, params){
  return service.post(url, params)
}



}
 export default http