在路由跳轉中我們會用到 登入成功後儲存的 token

目的是為了 避免沒有登入也能開啟我們的專案操作頁面

 

login.vue

this.$refs.loginForms.validate((valid) => {                     if (valid) {                         that.$post('/login',{                             phone: that.loginForm.username,                             password: that.loginForm.password                         },function(ret){                             that.loginLoading = false;                             if(ret.msg == "success"){                                 sessionStorage.setItem("token","success");                                 that.$message({type: "success", message: "登入成功"})                                 return that.$router.replace("/home");                             }else{                               that.$message({type: 'error', message: ret.msg || '請檢查您的使用者名稱和密碼'})                             }                         })                     } else {                         that.$message({type: 'error', message: '請檢查您的使用者名稱和密碼'})                         this.loginLoading = false;                     }                 })     路由(router - index.js)：   // 導航守衛 router.beforeEach((to, from, next) => {   const token = sessionStorage.getItem('token');   const outerPaths = ['/account/login', '/account/register', '/account/forget','/auth', '/home/system/wph_set', '/home/system/pdd_set']; // 當前 path 不需要登入也可以進入系統，但是隻能操作當前頁面
  if (!token && !outerPaths.includes(to.path)) {     next('/account/login');   } else {     if(to.path == "/auth") {       document.title = to.meta.title  // 進入這個頁面會被更改頁面標題     } else document.title = 'CPS流量變現後臺管理系統'     next();   } });