目錄
如何做才能限制要登錄之后才能訪問？
路由元信息
- 給路由存放信息
用戶權限控制
用路由守衛--
next()可以控制組件是否可以被訪問
1. 定義路由元信息，確定哪個路由需要登陸權限
router>index.js
{
name: 'cart',
path: '/cart',
component: Cart,
meta: { requiresAuth: true }
}
2. 進入路由后，確認用戶是否登錄
- 全局路由守衛中做判斷
如何實現登陸后跳回原頁面？
- query & this.$router
-
登錄則放行 -- [暫時]
-
否則跳轉至登錄界面並傳遞目標路由地址
app>routers>index.js -- 確認用戶是否登錄
router.beforeEach((to,from,next) => {
// 判斷當前路由是否需要路由權限
if(to.meta.requiresAuth) {
//獲取tokenlet
Authorization = localStorage.getItem('Authorization');
if(Authorization) {
//登錄則放行
next();
} else {
//否則跳轉到登錄頁面
//同時傳遞路由地址 -- 為了登錄后能夠再次返回
// router.push('/login');
next({
path: '/login',
query: {
redirectUrl: to.fullPath
}
});
}
} else {
next();
}
})
Login.vue -- 實現登錄后跳回購物車or我的
// 獲取token並保存到本地
let Authorization = data.data;
localStorage.setItem('Authorization', Authorization);
//實現登錄后跳回購物車or我的
console.log(this.$route.query);
let { redirectUrl } = this.$route.query || '/mine';
this.$router.replace(redirectUrl);
3. 校驗token的有效性
-
是否過期
-
是否被篡改
token.js
function verify(token) {
let result;
try {
//解密
var decoded = jwt.verify(token, secretKey);
console.log('verify', decoded);
result = true;
} catch(err) {
// err
result = false;
}
return result;
}
database>routers>index.js
Router.get('/verify', (req,res) => {
//獲取請求頭上的token
let Authorization = req.get('Authorization');
if(token.verify(Authorization)) {
res.send(formatData())
} else {
res.send(formatData({status:0}))
}
});
app>routers>index.js -- 發送校驗請求
router.beforeEach((to,from,next) => {
//判斷當前路由是否需要路由權限
if(to.meta.requiresAuth) {
//獲取token
let Authorization = localStorage.getItem('Authorization');
if(Authorization) {
//登錄則放行
next();
//先放行，后期校驗不通過再返回
//發送校驗請求--校驗接口
router.app.axios.get('http://localhost:1910/verify', {
headers: {
Authorization
}
}).then(({ data }) => {
console.log('校驗結果:', data);
if(data.status == 0) {
//跳轉到登錄頁面
next({
path: '/login',
query: {
redirectUrl: to.fullPath
}
});
}
})
} else {
//否則跳轉到登錄頁面
//同時傳遞路由地址 -- 為了登錄后能夠再次返回
// router.push('/login');
next({
path: '/login',
query: {
redirectUrl : to.fullPath
}
});
}
} else {
next();
}
})
如何實現下次免登錄？
- token令牌
[在后端加密]
1. 第一次用戶登錄，后端校驗通過則生成一個token，並返回給客戶端
-
借助第三方工具---
jsonwebtoken -
token.js ---創建token
const secretKey = 'zhoutest'; //密鑰
/**加密--創建token
*
* @param {Object} data 加密的數據
* @param {Number|String} expirseIn 有效期
* @return {String} 返回token
*/
function create(data, expiresIn=20) {
let token = jwt.sign(
data,
secretKey, //密鑰
{ expiresIn } //有效期（單位：s)
);
return token;
}
// login.js--將數據加密后生成的token，通過data傳到客戶端[前后端數據統一格式]
const { formatData, token } = require('../utils');
const colName='user';
Router.get('/', async (req, res)=>{
let { username, password } = req.query;
let data = await find(colName, { username, password })
if(data.length > 0) {
//登錄成功創建一個令牌
let Authorization = token.create({username});
res.send( formatData({ data: Authorization }));
} else {
res.send(formatData({ status:0 }))
}
})
2. 客戶端接收到token，保存到本地
- Login.vue -- 保存
// 獲取token並保存到本地
let Authorization = data.data;
localStorage.setItem('Authorization', Authorization);