Login permission is the verification of the user
Application scenarios
When you need to log in to assess whether certain pages are displayed
Implementation approach
Router. beforeEach coordinates with login credential token, where router.beforeEach determines whether the page is displayed and token determines whether to log in.
Implementation method
When configuring a routing rule, add a meta attribute to the routing rule configuration object for which the page can be displayed only after login. If the need_login attribute in the route information is true or false (indicating that the page can be accessed without login), the page is directly displayed. If it is true (this page can be accessed only after login) : Then check whether there is a login certificate token in the front end. If there is a login token, the page is directly redirected to the corresponding page. If no, the login page is displayed.
The key code is as follows
router->index.js
// Configure routing rules
const router = new Router({
routes: [{path: '/login'.// Login page
name: 'Login'.component: Login,
},
{
path:"/tourist".// Visitor page
name:" tourist".component: Tourist,
},
{
path:"/myCenter".// User page
name:"MyCenter".component: MyCenter,
meta: {need_login:true // Login is required}}});// Register a global front-guard with router.beforeEach to determine whether the user is logged in
router.beforeEach((to, from, next) = > {
const { need_login = false } = to.meta;
const { token } = store.state; // Obtain the token from vuex
if(need_login && ! token) {// Jump to the login page if the user is not logged in
const next_page = to.name;
next({
name: 'Login'.params: {
redirect_page: next_page,// The route name of the page to be accessed is passed as a parameter to the login page}}); }else {
// No login is requirednext(); }});Copy the code
login.vue
// Get user information
// The token returned by the background is stored to localStorage through VUEX after the successful login callback
login () {
let _this = this;
if (this.loginForm.username === ' ' || this.loginForm.password === ' ') {
alert('Account number or password cannot be empty');
} else {
this.axios({
method: 'post'.url: '/user/login'.data: _this.loginForm
}).then(res= > {
console.log(res.data);
_this.userToken = 'Bearer ' + res.data.data.body.token;
// Save the user token to vuex
_this.changeLogin({ Authorization: _this.userToken });
_this.$router.push('/home');
alert('Successful landing');
}).catch(error= > {
alert('Wrong account or password');
console.log(error); }); }}Copy the code
store->index.js
const store = new Vuex.Store({
state: {
/ / store token
Authorization: localStorage.getItem('Authorization')?localStorage.getItem('Authorization') : ' '
},
mutations: {
// Modify the token and store the token to localStorage
changeLogin (state, user) {
state.Authorization = user.Authorization;
localStorage.setItem('Authorization', user.Authorization); }}});Copy the code